Javascript Select-all checkbox suddenly not working

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

`addEventListener` won't work in `IE < 9` instead it has `attachEvent` — The Alpha, Aug 22 '12 at 20:08
Your code be greatly reduced and made more efficient by delegating the event rather than binding the same event to every checkbox. Also, `change` events should be use with checkboxes, not `click`. — Mitya, Aug 22 '12 at 20:12
After fixing the errors (missing `function` keyword and wrong loading order) in the fiddle it works for me - http://jsfiddle.net/VHXDx/4/ — Andreas, Aug 22 '12 at 20:15
It's working now [here](http://jsfiddle.net/VHXDx/5/). Already `Andreas` fixed it. — The Alpha, Aug 22 '12 at 20:16
*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 — lonewaft, Aug 22 '12 at 20:21
@mplungjan YES! thank you, it works for IE, and I'm guessing it works for firefox and Chrome as well? — lonewaft, Aug 22 '12 at 20:32
AFAIK it works for all known browsers that support JS. Please see my [answer](http://stackoverflow.com/a/12080955/295783) and the link to the discussion of attaching event handlers — mplungjan, Aug 22 '12 at 20:34
Note that this would have given you errors in IE7. And when I asked you, you said you didn't get any errors. A small tip is that you should always check for errors, this helps everyone and you to resolve your issue much faster. — Esailija, Aug 22 '12 at 21:06
@Esailija The browser gave me no visible errors so I said there were no errors... — lonewaft, Aug 28 '12 at 20:09

score 2 · Accepted Answer · edited May 23 '17 at 11:56

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

score 1 · Answer 2 · answered Aug 22 '12 at 20:32

I've made some changes to work in IE < 9, i.e.

addEvent(el1, 'click', function(){selectAll(0,8)},false);
function addEvent(el, event, callback, bubble){
    if(el.addEventListener) el.addEventListener(event, callback, bubble);
    else if(el.attachEvent) el.attachEvent('on'+event, callback, bubble);
}

Complete Demo.

score 0 · Answer 3 · answered Aug 22 '12 at 20:27

You forgot to put the word function before script1() so you got an error because it didn't know what script1() was on your body onload. I tried this code out (pretty much a copy and paste (I don't like JS fiddle all the time) and it seems to work.

<!DOCTYPE html>
<html>
    <style>
        html, body { height: 100%; }
        #container { margin-top: 29px; }
        header { height:29px; margin: 0 49px; background-color:#999999; }

        #div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
        #div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
        #div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
        #div4 { height: 100%; background-color: yellow; display: inline-block;  float: right; }
    </style>
<body>
<body onload="script1();">
    Please check the box if you took a course in the respective subject in that semester.
<table width="200" border="1">
  <tr>
    <th scope="col"></th>
    <th scope="col">8th Sem 1</th>
    <th scope="col">8th Sem 2</th>
    <th scope="col">9th Sem 1</th>
    <th scope="col">9th Sem 2</th>
    <th scope="col">10th Sem 1</th>
    <th scope="col">10th Sem 2</th>
    <th scope="col">11th Sem 1</th>
    <th scope="col">11th Sem 2</th>
    <th scope="col">12th Sem 1</th>
    <th scope="col">12th Sem 2</th>
    <th scope="col">Select All Semesters</th>
  </tr>
  <tr>
    <th scope="row">History</th>
    <td></td>
    <td></td>
    <td><input name="AG[]" type="checkbox" value="A9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="A10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="A11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="A12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A12Sem2"></td>
    <td><input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">English</th>
    <td></td>
    <td></td>
    <td><input name="AG[]" type="checkbox" value="B9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="B10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="B11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="B12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B12Sem2"></td>
    <td> <input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">Mathematics</th>
    <td><input name="AG[]" type="checkbox" value="C8Sem1">*</td>
    <td><input name="AG[]" type="checkbox" value="C8Sem2">*</td>
    <td><input name="AG[]" type="checkbox" value="C9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="C9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="C10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="C10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="C11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="C11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="C12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="C12Sem2"></td>
    <td> <input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">Science</th>
    <td></td>
    <td></td>
    <td><input name="AG[]" type="checkbox" value="D9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="D9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="D10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="D10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="D11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="D11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="D12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="D12Sem2"></td>
    <td> <input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">Foreign Language</th>
    <td><input name="AG[]" type="checkbox" value="E8Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="E8Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="E9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="E9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="E10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="E10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="E11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="E11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="E12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="E12Sem2"></td>
    <td> <input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">Visual and Performing Arts</th>
    <td></td>
    <td></td>
    <td><input name="AG[]" type="checkbox" value="F9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="F9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="F10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="F10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="F11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="F11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="F12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="F12Sem2"></td>
    <td> <input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">Electives</th>
    <td></td>
    <td></td>
    <td><input name="AG[]" type="checkbox" value="G9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="G9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="G10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="G10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="G11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="G11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="G12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="G12Sem2"></td>
    <td> <input type="button" name="CheckAll" value="Check All"></td>
  </tr>
</table>
</body>
    <script>
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
el1 = el[0];  // get the first element (in this case, being the only one)
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];

// now we have an element to call the method on

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


}
    </script>
</html>

I forgot to put the function in the jfiddle but in the source it was included. — lonewaft, Aug 22 '12 at 20:31
Sorry I just saw that you were working in IE7 so yeah browser support is a big thing... Look @Sheikh answer. — aug, Aug 22 '12 at 20:37

Javascript Select-all checkbox suddenly not working

3 Answers3