Question

I have the following HTML structure:

<ul class="cat_select">
    <li class="main_type_check">
         <div class="ez-checkbox">
              <input id="web" class="cat_check_main ez-hide" type="checkbox" name="category" value="Activities">
         </div>
         <label for="web"><b>Web</b></label>
    </li>
    <li>
         <div class="ez-checkbox">
              <input id="events" class="cat_check ez-hide" type="checkbox" name="category" value="Events">
         </div>  
        <label for="events">Events</label>
    </li>
</ul>

Using jQuery/Javascript i’ve created the following code:

$(".main_type_check .ez-checkbox input").click(function () {

        if($(".cat_check").is(":checked")) {
            $(this).parents(".main_type_check").siblings().find("input").removeAttr("checked");
            $(this).parents(".main_type_check").siblings().find(".ez-checkbox").removeClass("ez-checked");
            $('.what_form').submit();
        }
        else {
            $(this).parents(".main_type_check").siblings().find("input").attr("checked", "true");
            $(this).parents(".main_type_check").siblings().find(".ez-checkbox").addClass("ez-checked");
            $('.what_form').submit();
        }

});

This will toggle the checkboxes however if one checkbox is checked (not the main one) and then the main one is checked it will only uncheck the checked sub checkbox and check the main one. Other checkboxes will remain the same.

How can i completely toggle checkboxes ex: I’ve selected one sub checkbox and click on the main one – This should result in checking every sub checkbox under the main one including the already checked one.

Thanks!!

---

EDIT:

The ez-checkbox and ez-hide classes and added by this checkbox plugin.

---

EDIT 2:

I forgot to mention that main categories are grouped by UL with the same class cat_select. Here is the structure:

<ul class="cat_select">
    <li>MAIN CHECKBOX</li>
    <li>SUB CHECKBOX</li>
    <li>SUB CHECKBOX</li>
</ul>
<ul class="cat_select">
    <li>MAIN CHECKBOX</li>
    <li>SUB CHECKBOX</li>
    <li>SUB CHECKBOX</li>
</ul>
<ul class="cat_select">
    <li>MAIN CHECKBOX</li>
    <li>SUB CHECKBOX</li>
    <li>SUB CHECKBOX</li>
</ul>

---

FINAL SOLUTION:

$(".main_type_check .ez-checkbox input").click(function () {
   $(this).closest('.cat_select').find('.cat_check').attr('checked', $(this).prop('checked'));
});

$(".cat_check").click(function() {
   $(this).closest('.cat_select').find('.cat_check_main').attr('checked',$(this).closest('.cat_select').find('.cat_check').not(':checked').length<=0);
});

Thank you all for your help!!!!

Answer 1

I think this is the solution to your problem 🙂

http://jsfiddle.net/mYYng/3/

$('.cat_check_main').click(function(){
    $(this).closest('.cat_select').find('.cat_check').prop('checked', $(this).prop('checked'));
});

$('#Situation1 .cat_check').click(function(){
    $(this).closest('.cat_select').find('.cat_check_main').prop('checked',$(this).closest('.cat_select').find('.cat_check').not(':checked').length<=0);
});


$('#Situation2 .cat_check').click(function(){
    $(this).closest('.cat_select').find('.cat_check_main').prop('checked',$(this).closest('.cat_select').find('.cat_check:checked').length>0);
});