堆棧內存溢出
  簡體   English   中英

如何勾選1個復選框以選中HTML表格中的所有復選框

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

 原文  2016-03-03 07:32:12  3   3    javascript/ c#/ jquery/ html/ asp.net

問題描述

我正在做一個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++;
                    }

3 個解決方案

解決方案1
 0  2016-03-03 07:37:45

請嘗試以下解決方案。 我已經根據您的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);
    }
});

解決方案2
 0 已采納  2016-03-03 07:38:55

使用.next()選擇當前元素的下一個立即元素。

:checkbox => 選擇類型為checkbox的所有元素

.prop => 為匹配的元素集設置一個或多個屬性嘗試以下操作： 

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

解決方案3
 0  2016-03-03 08:55:14

您也可以為主復選框提供一個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); });

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在CRM 4自定義表單上實施“全選”復選框？ 如何在jQuery數據表中添加復選框？ "如何在 HTML 中實現“全選”復選框？" 檢測復選框更改 顯示標簽和復選框 如何使用JavaScript或jquery檢查/取消選中復選框？ 如何檢查復選框的值是否存在於文本區域中 復選框刪除前檢查 根據angularjs中的復選框值刪除表視圖的內容 如何在 Google Sheets/Apps Script 中創建多選下拉復選框？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM