Javascript 选中/取消选中表中的所有复选框
我有一张有信息的桌子。表的第一列有复选框。 通过选中复选框，我可以使用按钮添加/删除行。现在的问题是如何使用标题上的复选框选择或取消选择所有复选框 这是我的密码：Javascript 选中/取消选中表中的所有复选框,javascript,html,dom,Javascript,Html,Dom,我有一张有信息的桌子。表的第一列有复选框。 通过选中复选框，我可以使用按钮添加/删除行。现在的问题是如何使用标题上的复选框选择或取消选择所有复选框 这是我的密码： <HTML> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <SCRIPT language="javascript"> function addRow(tableI
<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>
在HTML表中添加/删除动态行
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
var element1=document.createElement（“输入”）；
element1.type=“复选框”；
element1.name=“chkbox[]”；
单元格1.附加子元素（元素1）；
var cell2=行插入单元格（1）；
cell2.innerHTML=行数；
var cell3=行插入单元格（2）；
cell3.innerHTML=行数；
var cell4=行插入单元格（3）；
cell4.innerHTML=行数；
var cell5=行插入单元格（4）；
cell5.innerHTML=行数；
var cell6=行插入单元格（5）；
cell6.innerHTML=行数；
}
函数deleteRow（tableID）{
试一试{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
对于（var i=1；i实际上，您的checkAll（..）
没有任何附件就挂起了
1） 在更改时添加事件处理程序
<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;
}
}
}
}
功能检查全部（ele）{
var复选框=document.getElementsByTagName（'input'）；
如果（勾选元素）{
对于（变量i=0；i
添加到您想要的复选框，如下所示
<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/>
全选
制作
型号
说明
开始年份
年末
在JavaScript中，您可以将selectall函数编写为
function selectall(source) {
checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
函数selectall（源代码）{
复选框=document.getElementsByName（'foo'）；
对于（var i=0，n=checkbox.length；i这将选择并取消选择所有复选框：
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;
}
}
}
函数checkAll（）
{
var复选框=document.getElementsByTagName（'input'），val=null；
对于（变量i=0；i
更新：
您可以直接在表上使用以获取复选框列表，而不是搜索整个文档，但它可能与旧浏览器不兼容，因此您需要首先检查：
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;
}
函数checkAll（）
{
var table=document.getElementById（'dataTable'）；
var checkbox=table.querySelectorAll（'input[type=checkbox]'）；
var val=复选框[0]。已选中；
对于（var i=0；i
或者更具体地说，对于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;
}
}
函数checkAll（tableID）
{
var table=document.getElementById（tableID）；
var val=表格。行[0]。单元格[0]。子项[0]。已选中；
对于（变量i=1；i
此解决方案更好，因为它较短且不使用循环
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);
});
$（文档）.ready（函数（）{
var someObj={}；
$（“#选中全部”）。单击（函数（）{
$（'.chk'）.prop（'checked'，this.checked）；
});
$（“.chk”）。单击（函数（）{
$（“#checkAll”）.prop（'选中'，（$（'.chk:checked'）。长度==$（'.chk'）。长度）？true:false）；
});
$（“输入：复选框”）.change（函数（）{
调试器；
someObj.elementChecked=[]；
$（“输入：复选框”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
someObj.element checked.push（$（this.attr（“id”））；
}
});
});
$（“#按钮”）。单击（函数（）{
调试器；
警报（someObj.elementChecked）；
});
});
- 全选
- 德里
- 浦那
- 果阿
- 哈里亚纳
- 莫哈利
试试这个：
$("input[type=checkbox]").prop('checked', true).uniform();
选中所有复选框
$（“输入[type=checkbox]”）。prop（'checked'，true）；
假设我添加一些行，然后选择所有行，然后全部删除。标题上的复选框仍然处于选中状态。当我添加新行时，它们没有被选中。我通过在删除行时取消选中标题复选框来解决此问题。@LeonArmstrong感谢您解决此问题。修复了现在的短函数：函数checkAll（ele）{var checkboxes=document.getElementsByTagName（'input'）；for（var i=0；i$（'#userTable'）.find（'input[name=“checkboxRow”]'）.prop（'checked'，this.checked）$("input[type=checkbox]").prop('checked', true).uniform();