Select all based on category

Question

  function Check(chk)  
    {  
       if(document.myform.brandid.value!="Check all"){  
        for (i = 0; i < chk.length; i++)  
        chk[i].checked = true ;  
        document.myform.brandid.value="UnCheck all";  
       }else{  
        for (i = 0; i < chk.length; i++)  
            chk[i].checked = false ;  
            document.myform.brandid.value="Check all";  
       }  
    }  

I have a form which contains:

--category FRUITS --  
 checkbox for Select All   
 checkbox for Apple  
 checkbox for Mango  

--category VEGETABLES--  
 checkbox for Select All   
 checkbox for Carrots  
 checkbox for Cabbage  

How can I do select all wherein it will only select all items under it based on category type. If I check the 1st Select All which is for category fruit, only items Apple and Mango will have checked checkbox?

Answer 1

First create your form and add a class to mark group elements

<form name="my_form" id="my_form">
<h1>Fruits</h1> 
    <input type="checkbox" value="" id="all_fruits" /> Select All <br />
    <input type="checkbox" value="Apple" class="fruits" /> Apple <br />
    <input type="checkbox" value="Apple" class="fruits" /> Mango

<h1>VEGETABLES</h1> 
    <input type="checkbox" value="" id="all_veges" /> Select All <br />
    <input type="checkbox" value="Carrots" class="veges" /> Carrots <br />
    <input type="checkbox" value="Cabbage" class="veges" /> Cabbage
</form>

Then create an unobtrusive function to handle desired actions

function Check() {  
  var allFruits = document.getElementById('all_fruits'), 
  allVeges = document.getElementById('all_veges'), 
  formElems = document.forms.my_form.elements;

  allFruits.onclick = function() {   // attach a click event to the first group (fruits)
  if (allFruits.checked) {        // if SELECT ALL is clicked
     for (var i = 0; i < formElems.length; i++) {  // loop over all form elements
        if ( formElems[i].type === 'checkbox' && formElems[i].className === 'fruits' ){ // if a checkbox has a class of fruits
           formElems[i].checked = true;  // check it
        }
     }
   }
  else {  // if SELECT ALL is unchecked 
     for (var i = 0; i < formElems.length; i++) {  // loop over all form elements 
        if ( formElems[i].type === 'checkbox' && formElems[i].className === 'fruits' ) { // if a checkbox has a class of fruits
           formElems[i].checked = false;  // uncheck it
        }
      }
    }
   };

  // do the same for vegetables 
  allVeges.onclick = function() {
  if(allVeges.checked){
     for (var i = 0; i < formElems.length; i++) {
        if ( formElems[i].type === 'checkbox' && formElems[i].className === 'veges' ){
           formElems[i].checked = true;
        }
     }
   }
  else {
     for (var i = 0; i < formElems.length; i++) {
        if ( formElems[i].type === 'checkbox' && formElems[i].className === 'veges' ){
           formElems[i].checked = false;
        }
      }
    }
   };
}

window.onload = Check;  // activate function