Select - Unselect checkbox- getElementById

debugcn 投稿 Dev

user580950

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>

Ori Drori

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>