[英]Select - Unselect checkbox- getElementById
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>
An id
in a page should be unique. 页面中的
id
应该是唯一的。 In addition, document.getElementById()
returns a single element, and not an array or array like object of elements. 另外,
document.getElementById()
返回单个元素,而不是像元素对象那样的数组或数组。
Use classes, and select them using document.getElementsByClassName()
or document.querySelectorAll()
: 使用类,并使用
document.getElementsByClassName()
或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: 如果您无法更改HTML,则可以使用
document.querySelectorAll()
选择多个非唯一ID,但这取决于浏览器的实现,并且可能在以后不起作用:
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>
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')
id必须对每个DOM元素都是唯一的,创建复选框组的正确方法是为输入指定相同的名称,然后可以使用
document.getElementsByName('name')
在javascript中获取它们
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.