选中/取消选中表格中的所有复选框答案

【问题标题】：Check/Uncheck all the checkboxes in a table选中/取消选中表格中的所有复选框
【发布时间】：2013-10-17 09:55:25
【问题描述】：

我有一张包含信息的表格。表格的第一列有复选框。我可以通过选中复选框使用按钮添加/删除行。我现在遇到的问题是如何使用标题上的复选框选择或取消选择所有复选框。

这是我的代码：

<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>

【问题讨论】：

标签： javascript html dom

【解决方案1】：

实际上你的 checkAll(..) 没有任何附件就挂了。

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;
             }
         }
     }
 }

Updated Fiddle

【讨论】：

@LeonArmstrong 感谢您解决这个问题。现已修复jsfiddle.net/praveen_jegan/7Dqqf/82
短函数：function checkAll(ele) { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i
您的回答在 5.5 年后拯救了某人。

【解决方案2】：

JSBin

将onClick event 添加到您想要的复选框中，如下所示。

<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;
  }
}

【讨论】：

【解决方案3】：

这将选中和取消选中所有复选框：

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;
         }
     }
 }

Demo

更新：

您可以直接在表格上使用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;
 }

或者更具体地针对 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;
    }
}

Demo

【讨论】：

假设我添加了一些行，然后选择所有行，然后全部删除。标题上的复选框仍处于选中状态。当我添加新行时，它们不会被选中。
我通过在删除行时取消选中标题复选框来解决它。

【解决方案4】：

这个解决方案更好，因为它更短并且不使用循环。

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);
    });

【讨论】：

$('#userTable').find('input[name="checkboxRow"]').prop('checked', this.checked); 单行版本

【解决方案5】：

选中所有复选框

$("input[type=checkbox]").prop('checked', true);

【讨论】：

【解决方案6】：

$(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>

【讨论】：

【解决方案7】：

试试这个：

$("input[type=checkbox]").prop('checked', true).uniform();

【讨论】：

虽然这可能会回答问题，但请提供任何解释，以确保人们理解这里发生的事情。