如何勾选 1 复选框以选中 html 表格中的所有复选框

How to tick 1 check-box to select all check box's in html Table

本文关键字：复选框表格 html 何勾选更新时间：2023-09-26

我正在制作一个aspx页面，我有3个html表，动态地为每个单元格添加复选框。在这里，我为每个表（外侧表）设置了另一个复选框，如果我选中该复选框，那么我想选中相应html表中的所有复选框，在这里我正在使用一些脚本进行检查。但是，如果我选择一个，则页面中的所有复选框（选中 3 个表复选框）也会被选中。如何解决此问题？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

   <script src="jquery-1.12.1.min.js"></script>
       <script type="text/javascript">         
           function checkAll(bx) {
               var cbs = document.getElementsByTagName('input');
               for (var i = 0; i < cbs.length; i++) {
                   if (cbs[i].type == 'checkbox') {
                       cbs[i].checked = bx.checked;
                   }
               }
           }
      </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>       
    <h1>Adjs</h1>
        <h4>Select All</h4>
        <input type="checkbox" onclick="checkAll(this)" id="chk1" />
           <table id="tbl1" runat="server" border="1">                
            <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>  <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
             <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
        </table>
        <h1>chgs</h1>
          <h4>Select All</h4>
        <input type="checkbox" onclick="checkAll(this)" id="chk2" />
        <table id="tbl" runat="server" border="1">
            <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>  <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
             <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
        </table>
        <br />
         <h1>Pmts</h1>
          <h4>Select All</h4>
        <input type="checkbox" onclick="checkAll(this)" id="chk3" />
        <table id="Table1" runat="server" border="1">
            <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>  <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
             <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
        </table>
        <br />
        <div class="cls1">
            <h2>Select Condition</h2>
       <table id="Table2" runat="server" border="1">
            <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>  <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
              <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
             <tr>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

下面的代码正在动态添加复选框（使用 C#）

Label objLabel = new Label();                  
                    CheckBox chk1 = new CheckBox();
                    objLabel.ID = "lbladj" + i.ToString();
                    objLabel.Text = dt.Rows[i][0].ToString();
                    chk1.ID = "chk" + objLabel.Text;
                    Form.Controls.Add(objLabel);
                    Form.Controls.Add(chk1);
                    if (Column < 5)
                    {
                        tbl1.Rows[Row].Cells[Column].Controls.Add(objLabel);
                        tbl1.Rows[Row].Cells[Column].Controls.Add(chk1);
                        Column++;
                    }
                    else
                    {
                        Row++;
                        Column = 0;
                        tbl1.Rows[Row].Cells[Column].Controls.Add(objLabel);
                        tbl1.Rows[Row].Cells[Column].Controls.Add(chk1);
                        Column++;
                    }

使用 .next() 选择当前元素的下一个直接元素。

:checkbox => "选择所有类型元素"复选框

.prop => 为匹配元素集设置一个或多个属性 试试这个：

$(':checkbox').on('click', function() {
  $(this).next('table').find(':checkbox').prop('checked', this.checked);
});

请尝试以下解决方案。我已经根据您的 html 结构使用了 next（）方法，然后选中所有复选框。

jQuery(':checkbox[id^="chk2"]').on('click', function(){
    var $this = jQuery(this);
    if($this.is(':checked')) {
         $this.next('table').find(':checkbox').prop('checked', true);
    } else {
         $this.next('table').find(':checkbox').prop('checked', false);
    }
});

您也可以为主复选框提供一个id（mainid），给所有其他复选框一个自定义类（CustomClass）。在主复选框上单击，使所有其他复选框值为 true。对于下一个表，给出另一个类（CustomClass2），这样它就不会被选中，而只选中带有$（'CustomClass'）的复选框

$('#mainid').on('click', function() { $('CustomClass').attr("checked", true); });

或
使用最近的

$('#chk1').click(function(e){ var table= $(e.target).closest('table'); $('td input:checkbox',table).prop('checked',this.checked); });