Question

I have 60 checkboxes with the name “AG[]” and i was using a check-all function to do the job, combined with an eventlistener on buttons that were named CheckAll. Suddenly the buttons stopped working..
The select-all function is

function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
    checkies[i].checked = !(checkies[i].checked);
    }
}

which works, because I tried onloading one run of this function.
This is the full script onload that adds the event listener on the buttons.

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


}

If i run the function by itself like

SelectAll(0,8);

it works, but if I do it through addeventlistener it does not.
The code was working well and I was able to check-all with buttons but i dont get what happened..
Here’s the jsfiddle jsfiddle

*Okay new problem. * the code that Andreas posted is still not working for me which probably means its because im running it from IE7, which does not support addeventlistener. So how do i make my code support firefox/chrome(Addeventlistener) and

Answer 1

Keeping addEventListener vs onclick in mind, the pragmatic and simple version is the following since it works in all browsers – downside as mentioned in the link is onlick supports only one event handler, while attachevent/addEventListener will fire all registered callbacks.

DEMO

function selectAll(a,b) {
  var checkies = document.getElementsByName('AG[]');
  for (var i = a;i < b;i++) {
    checkies[i].checked = !checkies[i].checked;
  }
}
function script1(){
  var el = document.getElementsByName('CheckAll');  // get all elements with that name="" attribute
  el[0].onclick=function() { selectAll(0,8) }
  el[1].onclick=function() { selectAll(8,16)}
  el[2].onclick=function() { selectAll(16,26)}
  el[3].onclick=function() { selectAll(26,34)}
  el[4].onclick=function() { selectAll(34,44)}
  el[5].onclick=function() { selectAll(44,52)}
  el[6].onclick=function() { selectAll(52,60)}
}