Html 选中/取消选中表中的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19282219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check/Uncheck all the checkboxes in a table
提问by EM10
I have a table with information. The first column of the table have checkboxes. I can add/delete rows with a button by checking the checkboxes. The problem I have now is how do I select or deselect all the checkboxes using the checkbox on the header.
我有一张包含信息的表格。表格的第一列有复选框。我可以通过选中复选框来添加/删除行。我现在遇到的问题是如何使用标题上的复选框来选择或取消选择所有复选框。
Here is my code:
这是我的代码：
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
cell3.innerHTML = rowCount;
var cell4 = row.insertCell(3);
cell4.innerHTML = rowCount;
var cell5 = row.insertCell(4);
cell5.innerHTML = rowCount;
var cell6 = row.insertCell(5);
cell6.innerHTML = rowCount;
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
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>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" border="1">
<tr>
<th><INPUT type="checkbox" name="chk[]"/></th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</TABLE>
</BODY>
</HTML>
回答by Praveen
Actually your checkAll(..)is hanging without any attachment.
其实你checkAll(..)挂在没有任何附件。
1) Add onchangeevent handler
1) 添加onchange事件处理程序
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>
2) Modified the code to handle check/uncheck
2) 修改了处理check/uncheck的代码
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;
}
}
}
}
回答by Naveen Kumar Alonekar
Add onClick eventto checkbox where you want, like below.
将onClick 事件添加到您想要的复选框，如下所示。
<input type="checkbox" onClick="selectall(this)"/>Select All<br/>
<input type="checkbox" name="foo" value="make">Make<br/>
<input type="checkbox" name="foo" value="model">Model<br/>
<input type="checkbox" name="foo" value="descr">Description<br/>
<input type="checkbox" name="foo" value="startYr">Start Year<br/>
<input type="checkbox" name="foo" value="endYr">End Year<br/>
In JavaScript you can write selectallfunction as
在 JavaScript 中，您可以将selectall函数编写为
function selectall(source) {
checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
回答by razz
This will select and deselect all checkboxes:
这将选择和取消选择所有复选框：
function checkAll()
{
var checkboxes = document.getElementsByTagName('input'), val = null;
for (var i = 0; i < checkboxes.length; i++)
{
if (checkboxes[i].type == 'checkbox')
{
if (val === null) val = checkboxes[i].checked;
checkboxes[i].checked = val;
}
}
}
Update:
更新：
You can use querySelectAlldirectly on the table to get the list of checkboxes instead of searching the whole document, but It might not be compatible with old browsers so you need to check that first:
您可以直接在表格上使用querySelectAll来获取复选框列表，而不是搜索整个文档，但它可能与旧浏览器不兼容，因此您需要先检查一下：
function checkAll()
{
var table = document.getElementById ('dataTable');
var checkboxes = table.querySelectorAll ('input[type=checkbox]');
var val = checkboxes[0].checked;
for (var i = 0; i < checkboxes.length; i++) checkboxes[i].checked = val;
}
Or to be more specific for the provided html structure in the OP question, this would be more efficient when selecting the checkboxes as it will access them directly instead of searching for them:
或者更具体地针对 OP 问题中提供的 html 结构，选择复选框时会更有效，因为它将直接访问它们而不是搜索它们：
function checkAll (tableID)
{
var table = document.getElementById (tableID);
var val = table.rows[0].cells[0].children[0].checked;
for (var i = 1; i < table.rows.length; i++)
{
table.rows[i].cells[0].children[0].checked = val;
}
}
回答by user3856437
This solution is better because it is shorter and doesn't use a loop.
此解决方案更好，因为它更短且不使用循环。
id="checkAll"is the header column
id="checkAll"是标题列
$('#checkAll').on('click', function() {
if (this.checked == true)
$('#userTable').find('input[name="checkboxRow"]').prop('checked', true);
else
$('#userTable').find('input[name="checkboxRow"]').prop('checked', false);
});
回答by Sheladiya Ajay
All CheckBox Checked
选中所有复选框
$("input[type=checkbox]").prop('checked', true);
$("input[type=checkbox]").prop('checked', true);
回答by Mayur Narula
$(document).ready(function () {
var someObj = {};
$("#checkAll").click(function () {
$('.chk').prop('checked', this.checked);
});
$(".chk").click(function () {
$("#checkAll").prop('checked', ($('.chk:checked').length == $('.chk').length) ? true : false);
});
$("input:checkbox").change(function () {
debugger;
someObj.elementChecked = [];
$("input:checkbox").each(function () {
if ($(this).is(":checked")) {
someObj.elementChecked.push($(this).attr("id"));
}
});
});
$("#button").click(function () {
debugger;
alert(someObj.elementChecked);
});
});
</script>
</head>
<body>
<ul class="chkAry">
<li><input type="checkbox" id="checkAll" />Select All</li>
<li><input class="chk" type="checkbox" id="Delhi">Delhi</li>
<li><input class="chk" type="checkbox" id="Pune">Pune</li>
<li><input class="chk" type="checkbox" id="Goa">Goa</li>
<li><input class="chk" type="checkbox" id="Haryana">Haryana</li>
<li><input class="chk" type="checkbox" id="Mohali">Mohali</li>
</ul>
<input type="button" id="button" value="Get" />
</body>
回答by Muhsen AL-khalil
Try this:
尝试这个：
$("input[type=checkbox]").prop('checked', true).uniform();
