堆栈内存溢出
  繁体   English   中英

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

[英]Check/Uncheck all the checkboxes in a table

 原文  2013-10-09 20:40:18  0   8    javascript/ html/ dom

问题描述

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

这是我的代码：

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

8 个解决方案

解决方案1
 62 已采纳  2013-10-09 20:50:41

实际上，您的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;
             }
         }
     }
 }

更新小提琴

解决方案2
 16  2013-10-09 20:50:57

JSBin

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

在 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
 9  2013-10-09 21:04:03

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

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

演示

更新：

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

演示

解决方案4
 5  2015-08-21 16:09:51

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

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

解决方案5
 1  2019-01-13 07:32:02

选中所有复选框

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

解决方案6
 0  2015-08-26 13:36:45

$(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
 0  2022-06-10 13:29:15

checkAll = ()=>
{
     let checkboxes = document.getElementsByTagName('input');
     let val = null;    
  
     for (let i = 0; i < checkboxes.length; i++)
     {
         if (checkboxes[i].type == 'checkbox')
         {
             checkboxes[i].checked = 'checked';
         }
     }
 }
 
 (()=>{
 
 checkAll();
 
 })();

小提琴

解决方案8
 -1  2016-08-12 09:08:58

尝试这个：

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 选中/取消选中所有复选框 使用jquery选中并取消选中所有复选框 如何选中和取消选中所有复选框 在 React-Table 中，如何选中/取消选中行或列中的所有复选框 全部选中/全部取消-复选框和表格数据 使用jQuery 1.10.2选中/取消选中所有复选框 选中取消选中基于另一个CheckBox的所有CheckBox 选中/取消选中所有子复选框jQuery Bootstrap 如何检查和取消选中div中的所有复选框 选中/取消选中网格视图中的所有复选框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM