I have the following Javascript function that is called when a change is made to one of my five "select-all" buttons of the class 'checkAllAud'. I basically have 5 vertical rows with possibly hundreds of checkboxes under each that need to be checked/unchecked.
My current code has problems with it when you want to click select all on all 5 columns, only every other column has all of its checkboxes selected. So my question is how can I rewrite this code so it will work with my multiple instances of select all columns and checkboxes.
var toggle = true;
//on click function here
$(".checkAllAud").change(function() {
var toggled = $(this).val();
//alert('checkallaud function triggered');
toggleBox(toggled);
});
//end on click function
function toggleBox(toggled) {
var objList = document.getElementsByName(toggled)
//alert('toggleBox function triggered');
for(i = 0; i < objList.length; i++)
objList[i].checked = toggle;
toggle = !toggle;
}
here is how my code currently works
column1 column 2 column 3 column 4 column 5
(select all) [x] [x] [x] [x] [x]
[x] [ ] [x] [ ] [x]
JSFiddle: http://jsfiddle.net/8KQcp/8/
You don't need to use a global, just take the checked state from the input you changed ;-)
$(".checkAllAud").change(function() {
var toggled = $(this).val();
//alert('checkallaud function triggered');
toggleBox(toggled, this.checked);
});
function toggleBox(toggled, checked) {
var objList = document.getElementsByName(toggled)
//alert('toggleBox function triggered');
for(i = 0; i < objList.length; i++)
objList[i].checked = checked;
}
working jsFiddle: http://jsfiddle.net/8KQcp/9/
Improvement: http://jsbin.com/cakogulu/1/
$(".checkAllAud").change(function() {
$('input[name^="' + this.value + '"]:checkbox').prop('checked', this.checked);
});