Select all based on category
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="UnC开发者_JAVA技巧heck 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?
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
精彩评论