ansaurus

Question

Jquery UI Checkboxes - Check category only if all subcategories are checked.

Answer 1

A:

Add something to your inputs to distinguish them as a member of a group like a class or something ala 'class="chbVegetables"' and then use the :checked selector

$(:checkbox[name='chk1']).checked=$('.chbVegetables:not(:checked)').length == 0

RHicke 2009-12-14 20:42:18

Answer 2

A:

Inside function toggleParentCheckboxes, try:

if ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"[]']:checked").length){
    // replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", true);
}

However, as czarchiac said, it's a little unclear what you're trying to accomplish

munch 2009-12-14 20:49:37

If the checkboxes next to "Apple","Orange","Banana" are all checked, then the "Category-Fruits" checkbox should be checked, else it should be unchecked. Same case with "Category-Vegetables" checkbox

Vincent 2009-12-14 20:57:42

Answer 3

+2 A:

your html is still a mess but here is the solution

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
 $(document).ready(function() {
  $('.toggle_subcheckbox').click(function(){
   $('.subcheckbox', $(this).parents('div')).toggle();
  });


  $('.subcheckbox input').change(function(){
   $this = $(this);
   var checker = true;
   $('input', $this.parents('.subcheckbox')).each(function(){
    if( ! $(this).is(':checked')){
     checker = false
    }
    else {
     $('.maincheckbox', $this.parents('div')).attr('checked', false);
    }
   });

   if(checker){
    $('.maincheckbox', $this.parents('div')).attr('checked', true);
   }
  });

  $('.maincheckbox').change(function(){
   var state = $(this).is(':checked');

   $('.subcheckbox input', $(this).parents('div')).each(function(){
    $(this).attr('checked', state);
   });
  });
 });
</script>
<style type="text/css" media="screen">
 .subcheckbox {
  display: none;
 }
</style>
</head>
<body>
 <form id="frmDinnerMenu" method="post" action="">
  <div>
      <label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Fruits</label>
   <input class="maincheckbox" type="checkbox" name="chk0" />
   <div class="subcheckbox">
    <div>
        <label>Apple</label>
        <input type="checkbox" value="0" name="chk0[1]" />
    </div>
    <div>
        <label>Banana</label>
        <input type="checkbox" value="0" name="chk0[2]" />
    </div>
    <div>
        <label>Orange</label>
     <input type="checkbox" value="0" name="chk0[5]" />
    </div>
   </div>
  </div>
  <div>
      <label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Vegetables</label>
   <input class="maincheckbox" type="checkbox" name="chk0" />
   <div class="subcheckbox">
    <div>
        <label>Cabbage</label>
        <input type="checkbox" value="0" name="chk1[21]" />
    </div>
    <div>
        <label>Tomatoes</label>
        <input type="checkbox" value="0" name="chk1[26]" />
    </div>
    <div>
        <label>Green Peppers</label>
     <input type="checkbox" value="0" name="chk1[29]" />
    </div>
   </div>
  </div>
 </form>
</body>
</html>

antpaw 2009-12-14 21:00:41

+1 Beautiful. No more tables. No more inline handlers.

czarchaic 2009-12-14 21:04:01

Thank you !! This is what I wanted to accomplish.. I know that using div tags is the best way to do it, but I wanted to do it with tables..

Vincent 2009-12-14 21:07:14

ansaurus

tags:

views:

answers:

Jquery UI Checkboxes - Check category only if all subcategories are checked.

related questions