Search code examples
javascriptcheckboxselectall

Select all javascript logic for multiple rows


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/


Solution

  • 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);
    });