我有一个带有多个复选框的HTML页面。
我需要一个名称为“全选”的复选框。当我选择此复选框时,HTML页面中的所有复选框都必须被选中。我该怎么做呢?
我有一个带有多个复选框的HTML页面。
我需要一个名称为“全选”的复选框。当我选择此复选框时,HTML页面中的所有复选框都必须被选中。我该怎么做呢?
当前回答
当你调用document.getElementsByName("name")时,你会得到一个Object。使用.item(index)遍历Object的所有项
HTML:
<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">
<input type="checkbox" name="rfile" value="/cgi-bin/">
<input type="checkbox" name="rfile" value="/includes/">
<input type="checkbox" name="rfile" value="/misc/">
<input type="checkbox" name="rfile" value="/modules/">
<input type="checkbox" name="rfile" value="/profiles/">
<input type="checkbox" name="rfile" value="/scripts/">
<input type="checkbox" name="rfile" value="/sites/">
<input type="checkbox" name="rfile" value="/stats/">
<input type="checkbox" name="rfile" value="/themes/">
其他回答
其实很简单:
const selectAllCheckboxes = () => {
const checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach((cb) => { cb.checked = true; });
}
JavaScript是最好的选择。下面的链接给出了一个使用按钮取消/全选的例子。你可以尝试调整它来使用复选框,只需使用你的“全选”复选框的onClick属性。
Javascript函数来检查或取消所有复选框
本页有一个更简单的示例
http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html
1:添加onchange事件处理程序
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>
2:修改代码以处理已检查/未检查
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
我的简单解决方案允许有选择地选择/取消选择表单给定部分中的所有复选框,同时为每个复选框使用不同的名称,以便在表单post后可以很容易地识别它们。
Javascript:
function setAllCheckboxes(divId, sourceCheckbox) {
divElement = document.getElementById(divId);
inputElements = divElement.getElementsByTagName('input');
for (i = 0; i < inputElements.length; i++) {
if (inputElements[i].type != 'checkbox')
continue;
inputElements[i].checked = sourceCheckbox.checked;
}
}
HTML的例子:
<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
<p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
<p><input type="checkbox" name="colin" />Firth, Colin</p>
<p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>
希望你喜欢!
我很惊讶没有人提到document.querySelectorAll()。纯JavaScript解决方案,工作在IE9+。
函数切换(源){ var checkboxes = document.querySelectorAll('input[type="checkbox"]'); For (var I = 0;I < checkboxes.length;我+ +){ If(复选框[i] != source) [我]复选框。Checked = source.checked; } } <input type="checkbox" onclick="切换(此);"/ >检查所有吗?< br / > <input type="checkbox" />Bar 1<br /> <input type="checkbox" />Bar 2<br /> <input type="checkbox" />Bar 3<br /> <input type="checkbox" />Bar 4<br />