Question

I have a code that adds a check-all toggle to each of my buttons that are named “CheckAll”
I recently faced a problem where from IE browsers, the buttons were not working, and I found out addEventListener does not work in IE, and you have to use attachEvent, however some people are saying this can have consequences as well, and they’re recommending jQuery. So can somebody demonstrate a jQuery version of my javaScript?
Here’s the code

function script1(){
var el = document.getElementsByName('CheckAll');  
el1 = el[0];  
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];



el1.addEventListener('click', function(){selectAll(0,8)}, false);
el2.addEventListener('click', function(){selectAll(8,16)}, false);
el3.addEventListener('click', function(){selectAll(16,26)}, false);
el4.addEventListener('click', function(){selectAll(26,34)}, false);
el5.addEventListener('click', function(){selectAll(34,44)}, false);
el6.addEventListener('click', function(){selectAll(44,52)}, false);
el7.addEventListener('click', function(){selectAll(52,60)}, false);


}

and here is a jfiddle
fiddle

Answer 1

In jQuery, there is one simple function to bind events: .on. You can select elements using the $ function using CSS notation: http://jsfiddle.net/VHXDx/11/. This would be all that’s needed, without a selectAll function:

// run when elements are available
$(function() {
    // select the `CheckAll` buttons and run a function for each one
    $("input[name='CheckAll']").each(function(i) {  // `i` is a counter
        // bind event
        $(this).on("click", function() {
            // select `AG[]` elements in the current row and toggle their checked property
            $(this).closest("tr").find("[name='AG[]']").prop("checked", function(j, current) {
                return !current;
            });
        });
    });
}​);​