选择 - 取消选中复选框 - getElementById

Question

代码未运行，也未显示任何错误

这是我的小提琴

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

页面中的id应该是唯一的。此外，document.getElementById()返回单个元素，而不是像元素对象那样的数组或数组。

使用类，并使用document.getElementsByClassName()或document.querySelectorAll()

选择它们

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

如果您无法更改HTML，则可以使用document.querySelectorAll()选择多个非唯一ID，但这取决于浏览器的实施，并且可能在将来无效：

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

每个DOM元素的id必须是唯一的，创建复选框组的正确方法是为输入指定相同的名称，然后可以使用document.getElementsByName('name')

在javascript中获取它们

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;