Question

我正在创建一个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++;
                    }

Answer 1

尝试以下解决方案。我根据你的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);
    }
});

Answer 2

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

:checkbox =＆gt; 选择复选框
类型的所有元素
.prop =＆gt; 为匹配元素集设置一个或多个属性   试试这个：

＆＃13;

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

＆＃13;

Answer 3

您也可以为主复选框指定一个id（mainid），并为所有其他复选框指定自定义类（CustomClass）。在主复选框上单击，将所有其他复选框值设为true。为下一个表格提供另一个类（CustomClass2），以便未选中，并且仅选中带有 $（＆＃39; CustomClass＆＃39;）的复选框

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

OR
使用最近的

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

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

3 个答案: