Question

I have a Jquery toggle function. I have made an if else statment to fix the bug when a checkbox i pressed directly its got checked and uncheched. Therefor I have maded a else if statement to check if the checkbox have been checked. But now the checkbox does not even get checked onclick.

Here it is live: http://jsfiddle.net/mvdnj/14/

My Jquery:

categoryDiv.toggle(function () {
    relativeMinimenu.removeClass('hidediv').addClass('someclass').show(200);
    categoryDiv.addClass('clicked').show(200);

    if(   categoryDiv.find('input:checkbox').attr('checked', 'checked') ) { 
        categoryDiv.find('input:checkbox').attr('checked', false);
    } else{
        categoryDiv.find('input:checkbox').attr('checked', 'checked');
    }
}
, function () {
    categoryDiv.removeClass('clicked').find('input:checkbox').prop("checked", false);
    relativeMinimenu.addClass('hidediv');
});

My HTML:

<div style="margin-top: 81px; width: 200px; float: left; background: none repeat scroll 0% 0% rgb(255, 255, 255);" cxlass="searchbox">  
<form method="get" action="/" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input type="hidden" value="✓" name="utf8"></div>

        <div id="category" class="menuitem category clicked">
                <label id="search_Company1_is_true" for="search_Company1">Company1 </label>
        <input type="hidden" value="0" name="search[Company1_is_true]"><input type="checkbox" value="1" name="search[Company1_is_true]" id="search_Company1_is_true" checked="checked">
        <div class="counter">1</div>
        </div>
        <div id="minimenu" class="someclass">
        <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>
        </div>
        <div class="menuitem category clicked">
        <label for="search_company2">company2</label>
        <input type="hidden" value="0" name="search[company2_is_true]"><input type="checkbox" value="1" name="search[company2_is_true]" id="search_company2_is_true" checked="checked">
        <div class="counter">1</div>
        </div>
 <div class="someclass">
        <div class="menuitem">
        </div>
</div>

    <input type="submit" value="Submit" style="display: none;" name="commit" id="search_submit" class="sdasd">

</form></div>

Answer 1

And my suggestion – jsFiddle

Basically much lighter HTML and jQuery code. I did strip off alot of the CSS, so you could re-add that later.

HTML

<form method="get" action="/" accept-charset="UTF-8">
    <div class="checkGroup">
        <label>
            <span>Company1</span>
            <input type="checkbox" name="section" value="1"/>
        </label>
        <div class="payload">
            <label>
                <span>Feature1</span>
                <input type="checkbox" name="sub" value="1"/>
            </label>
            <label>
                <span>Feature2</span>
                <input type="checkbox" name="sub" value="2"/>
            </label>
            <label>
                <span>Feature3</span>
                <input type="checkbox" name="sub" value="3"/>
            </label>
        </div>
    </div>
    <div class="checkGroup">
        <label>
            <span>Company2</span>
            <input type="checkbox" name="section" value="1"/>
        </label>
        <div class="payload">
            <label>
                <span>Feature1</span>
                <input type="checkbox" name="sub" value="1"/>
            </label>
            <label>
                <span>Feature2</span>
                <input type="checkbox" name="sub" value="2"/>
            </label>
            <label>
                <span>Feature3</span>
                <input type="checkbox" name="sub" value="3"/>
            </label>
        </div>
    </div>
</form>

Javascript / jQuery

$(document).ready(function(){

    $('.payload').hide();

    $('.checkGroup > label > input[type="checkbox"]').live('change',function(){
        $t = $(this);
        $t.closest('.checkGroup').find('.payload').toggle( $t.is(':checked') );
        if( !$t.is(':checked') ){
           $t.closest('.checkGroup').find('.payload input[type="checkbox"]')
               .attr('checked',false);
        }
    }).trigger('change');

});

If you are wanting to have Counters showing how many checkboxes in each group are checked, then use the following Javascript / jQuery – jsFiddle Demo

$('.payload').hide();

$('.checkGroup > label > input[type="checkbox"]').live('change',function(){
    $t = $(this);
    $t.closest('.checkGroup').find('.payload').toggle( $t.is(':checked') );
    if( !$t.is(':checked') ){
       $t.closest('.checkGroup').find('.payload input[type="checkbox"]')
           .attr('checked',false);
    }
}).trigger('change');


$('.checkGroup input[type="checkbox"]').change(function(){
   $c = $(this);
   $c.closest('.checkGroup').find('label > span b').text( $c.closest('.checkGroup').find('input[type="checkbox"]:checked').length );
}).trigger('change');