Select - Unselect checkbox- getElementById

Question

The code doesn't run, doesn't show any error as well

Here is my fiddle

 function selectall(source, course) { checkboxes = document.getElementById(course); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } 

 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"> <br> checkbox 1 <input id="trainingOverview1" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview1" type="checkbox" class="" name="fadddsd"><br> ----------------------------------------- <br><br> checkbox set 2 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')"> <br> checkbox 1 <input id="trainingOverview2" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview2" type="checkbox" class="" name="fadddsd"><br> 

Answer 1

An id in a page should be unique. In addition, document.getElementById() returns a single element, and not an array or array like object of elements.

Use classes, and select them using document.getElementsByClassName() or document.querySelectorAll() :

 function selectall(source, course) { var checkboxes = document.getElementsByClassName(course); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } 

 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"> <br> checkbox 1 <input class="trainingOverview1" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input class="trainingOverview1" type="checkbox" class="" name="fadddsd"><br> ----------------------------------------- <br><br> checkbox set 2 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')"> <br> checkbox 1 <input class="trainingOverview2" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input class="trainingOverview2" type="checkbox" class="" name="fadddsd"><br> 

If you can't change the HTML, you can select multiple non unique ids by using document.querySelectorAll() , but that depends on browser's implementation, and might not work in the future:

 function selectall(source, course) { var checkboxes = document.querySelectorAll('#' + course); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } 

 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"> <br> checkbox 1 <input id="trainingOverview1" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview1" type="checkbox" class="" name="fadddsd"><br> ----------------------------------------- <br><br> checkbox set 2 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')"> <br> checkbox 1 <input id="trainingOverview2" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview2" type="checkbox" class="" name="fadddsd"><br> 

Answer 2

The id must be unique to each DOM element the correct way to create a checkbox group is to give the same name for the inputs, you can then fetch them in javascript using document.getElementsByName('name')

 function selectall(source,course) { checkboxes = document.getElementsByName(course); for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = source.checked; } } 

 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"><br> checkbox 1<input name="trainingOverview1" type="checkbox" class="" ><br><br> checkbox 2<input name="trainingOverview1" type="checkbox" class="" ><br>