stackoom
  简体   繁体   中英

Check/Uncheck all the checkboxes in a table

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

Question

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>

8 answers

solution1
 62 ACCPTED  2013-10-09 20:50:41

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

Updated Fiddle

solution2
 16  2013-10-09 20:50:57

JSBin

Add onClick event to checkbox where you want, like below.

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

In JavaScript you can write selectall function as

function selectall(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

solution3
 9  2013-10-09 21:04:03

This will select and deselect all checkboxes:

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

Update:

You can use querySelectAll directly on the table to get the list of checkboxes instead of searching the whole document, but It might not be compatible with old browsers so you need to check that first:

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

Or to be more specific for the provided html structure in the OP question, this would be more efficient when selecting the checkboxes as it will access them directly instead of searching for them:

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

solution4
 5  2015-08-21 16:09:51

This solution is better because it is shorter and doesn't use a loop.

id="checkAll" is the header column 

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

solution5
 1  2019-01-13 07:32:02

选中所有复选框

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

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

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

fiddle

solution8
 -1  2016-08-12 09:08:58

尝试这个：

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Check/Uncheck all checkboxes Check and uncheck all checkboxes with jquery How to check and uncheck all checkboxes In React-Table, how to check/uncheck all checkboxes in a row or column Check all/uncheck all - checkboxes and tabular data check/uncheck all checkboxes with jquery 1.10.2 Check uncheck all CheckBoxes on the basis of another CheckBox Check/uncheck all child checkboxes jquery bootstrap How to check and uncheck all checkboxes inside a div Check/Uncheck all checkboxes in a grid view
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM