我有一个带有多个复选框的HTML页面。
我需要一个名称为“全选”的复选框。当我选择此复选框时,HTML页面中的所有复选框都必须被选中。我该怎么做呢?
我有一个带有多个复选框的HTML页面。
我需要一个名称为“全选”的复选框。当我选择此复选框时,HTML页面中的所有复选框都必须被选中。我该怎么做呢?
当前回答
$(document).ready(function() {
$(document).on(' change', 'input[name="check_all"]', function() {
$('.cb').prop("checked", this.checked);
});
});
其他回答
当你调用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/">
您可以使用此代码。
var checkbox = document.getElementById("dlCheckAll4Delete");
checkbox.addEventListener("click", function (event) {
let checkboxes = document.querySelectorAll(".dlMultiDelete");
checkboxes.forEach(function (ele) {
ele.checked = !!checkbox.checked;
});
});
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;
}
}
}
}
下面的方法非常容易理解,你可以在几分钟内实现现有的表单
与Jquery,
$(document).ready(function() {
$('#check-all').click(function(){
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("input:checkbox").attr('checked', false);
});
});
以HTML形式放在下面的按钮
<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a>
只需使用javascript,
<script type="text/javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
以HTML形式放在下面的按钮
<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>
<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>
同一表单上可能有不同的复选框集。下面是一个通过类名选择/取消选择复选框的解决方案,使用普通javascript函数document.getElementsByClassName
全选按钮
<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All
要选择的一些复选框
<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />
javascript
function selectAll() {
var blnChecked = document.getElementById("select_all_invoices").checked;
var check_invoices = document.getElementsByClassName("check_invoice");
var intLength = check_invoices.length;
for(var i = 0; i < intLength; i++) {
var check_invoice = check_invoices[i];
check_invoice.checked = blnChecked;
}
}