检查/取消选中表格中的所有复选框 [英] Check/Uncheck all the checkboxes in a table
本文介绍了检查/取消选中表格中的所有复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以通过选中复选框通过按钮添加/删除行。现在的问题是如何使用标题中的复选框来选择或取消选中所有复选框。
这是我的代码：
< HTML>
< HEAD>
< TITLE>在HTML表格中添加/删除动态行< / TITLE>
< SCRIPT language =javascript>
函数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;
}
函数deleteRow（tableID）{
try {
var table = document.getElementById（tableID）;
var rowCount = table.rows.length; （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）;
}
}
函数checkAll（formname，checktoggle）
{
var checkboxes = new Array（）;
checkboxes = document [formname] .getElementsByTagName（'input'）;
（var i = 0; i< checkboxes.length; i ++）{
if（checkboxes [i] .type =='checkbox'）{
checkboxes ] .checked = checktoggle;
}
}
}
< / SCRIPT>
< / HEAD>
< BODY>
< INPUT type =buttonvalue =Add Rowonclick =addRow（'dataTable'）/>
< INPUT type =buttonvalue =删除行onclick =deleteRow（'dataTable'）/>
< TABLE id =dataTableborder =1>
< tr>
< th>< INPUT type =checkboxname =chk []/>< / th>
< th> Make< / th>
> Model< / th>
< th>描述< / th>
< th>开始年份< / th>
< th>结束年份< / th>
< / tr>
< / TABLE>
< / BODY>
< / HTML>
解决方案
其实你的 checkAll（..） 挂起没有任何附件。
1）添加 onchange 事件处理程序
< th>< INPUT type =checkboxonchange =checkAll（this）name =chk []/> < /第>
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;
}
}
}
}
< a href =http://jsfiddle.net/praveen_jegan/7Dqqf/82/> 更新小提琴
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>
解决方案
Actually your checkAll(..) is hanging without any attachment.
1) Add onchange event handler
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>
2) Modified the code to handle 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;
}
}
}
}
这篇关于检查/取消选中表格中的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
