選擇所有基於

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 

我怎會選擇所有，其中也只會選擇基於類別類型下的所有項目。如果我檢查第一個選擇全部用於類別水果，只有蘋果和芒果將檢查複選框？

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