Выбрать все на основе категории

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";  
       }  
    }  

У меня есть форма, которая содержит:

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

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

Как я могу выбрать все, где он будет выбирать только все элементы под ним в зависимости от типа категории. Если я отмечу 1-й пункт «Выбрать все», который относится к категории фруктов, флажки будут только для товаров Apple и Mango?

Answer 1

Сначала создайте свою форму и добавьте класс для маркировки элементов группы

<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>

Затем создайте ненавязчивую функцию для обработки желаемых действий

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