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

mcdcgff0 于 2023-06-20 发布在其他

关注(0)|答案(9)|浏览(220)

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

<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

来源：https://stackoverflow.com/questions/19282219/check-uncheck-all-the-checkboxes-in-a-table

9条答案

按热度按时间

g6ll5ycj1#

实际上你的**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

赞(0）回复(0）举报 2023-06-20

ubbxdtey2#

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

赞(0）回复(0）举报 2023-06-20

bttbmeg03#

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

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

赞(0）回复(0）举报 2023-06-20

xdyibdwo4#

这个解决方案更好，因为它更短，并且不使用循环。
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);
    });

赞(0）回复(0）举报 2023-06-20

tp5buhyn5#

选中所有复选框
$("input[type=checkbox]").prop('checked', true);

赞(0）回复(0）举报 2023-06-20

vhmi4jdf6#

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

赞(0）回复(0）举报 2023-06-20

aelbi1ox7#

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

fiddle

赞(0）回复(0）举报 2023-06-20

4jb9z9bj8#

const mainCheckbox = document.getElementById('checkbox-all');
const tableBody = document.getElementById('table-body');
mainCheckbox.addEventListener('change', function() {
  if (this.checked === true)
    tableBody.querySelectorAll('input[type="checkbox"]').forEach(function(element) {
      element.checked = true;
    });
  else
    tableBody.querySelectorAll('input[type="checkbox"]').forEach(function(element) {
      element.checked = false;
    });
});

table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px 20px;

<table>
  <thead>
    <tr>
      <th>
        <input id="checkbox-all" type="checkbox">
      </th>
      <th>
        Name
      </th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        Name 01
      </td>
    </tr>

    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        Name 02
      </td>
    </tr>

    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        Name 03
      </td>
    </tr>
  </tbody>
</table>

这是一个只使用forEach()循环的JavaScript解决方案。我们将Change事件侦听器添加到主复选框中，然后使用checked属性来检查是否需要选中/取消选中复选框。

赞(0）回复(0）举报 2023-06-20

yb3bgrhw9#

试试这个：

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

赞(0）回复(0）举报 2023-06-20

我来回答

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

9条答案

更新：

相关问题

热门标签

最新问答