Question

我在C＃中有两个嵌套的中继器。外部有一些分组信息，内部有一个带X个复选框的表。

所以我会有Y个表。在每个表的顶部将有一个复选框（以及每行上的复选框）。我想要做的是能够从每个表格顶部的复选框中选择单个表格中的所有复选框。

我可以一次选择所有复选框，如下所示：

$(document).ready(function() {
        $("#checkboxflipflop").click(function() {
            var checked_status = this.checked;
            $(".storecheckbox input").each(function() {
                this.checked = checked_status;
            });
        });
    });

我无法弄清楚如何将选择范围缩小到当前表格，（每个表格顶部的复选框位于第th行）。

由于

编辑....对不起忘了提到我们在JQuery的1.26上并且不确定我是否被允许移动我们。这意味着“最接近”并不存在。

Answer 1

像下面这样的东西应该这样做

$('th input:checkbox').click(function(e) {

var table = $(e.target).closest('table');
$('td input:checkbox', table).attr('checked', e.target.checked);

});

这是一个 Working Demo ，其中两个表嵌套在另一个表（语义可怕，我会承认）。将 / edit 添加到网址以查看代码

编辑：

由于您仍在使用jQuery 1.2.6，请使用parents()代替closest()

$('th input:checkbox').click(function(e) {

var table = $(e.target).parents('table:first');
$('td input:checkbox', table).attr('checked', e.target.checked);

});

Answer 2

所以每个表都有一个“全部选中”复选框，对吗？为什么不给它一类.checkall？然后你可以这样做（未经测试）：

$('.checkall').click(function(){
  var checked_status = this.checked;
  $(this).closest('table').find('input:checkbox').each(function(){
    this.checked = checked_status;
  });
})

或者，如果您不想使用.checkall类，则使用如下选择器：

$('.storecheckbox input:nth-child(1)').click`

含义，“当点击具有类.storecheckbox的元素中的第一个输入时......”

Answer 3

以下是根据您当前的页面设计工作的代码段。

// iterate over all the tables in the page
$("table").each(function() {
    // attach a click event on the checkbox in the header in each of table
    $(this).find("th:first input:checkbox").click(function() {
        var val = this.checked;
        // when clicked on a particular header, get the reference of the table & hence all the rows in that table, iterate over each of them.
        $(this).parents("table").find("tr").each(function() {
            // access the checkbox in the first column, and updates its value.
            $(this).find("td:first input:checkbox")[0].checked = val;
        });
    });
});

Answer 4

$(this).closest("table").find("input:checkbox")

注意：似乎所有select-all-in-this-table-checkboxes都具有相同的id，id在页面中应该是唯一的，您应该使用类。（或只是table th input）

Answer 5

//这对我有用

    <thead>
    <tr>
        <th><asp:CheckBox ID="chkHeader" runat="server" Visible="false" /></th>
    </tr>
    </thead>

    <ItemTemplate>
    <tr>
        <td>
            <asp:CheckBox ID="chkRow" runat="server" Visible="false" onclick="handleClick(this);"/>
            <asp:CheckBox ID="chkForDisplayGrayed" runat="server" Visible="false"/>
        </td>

    </tr>
    </ItemTemplate>


<script type="text/javascript">
    $(document).ready(function () {
    var result = $('#tableEmployeeRecords').dataTable({
        "oLanguage": {
            "sSearch": "Filter: ",
            "sEmptyTable": "No results found."
        },
        "columnDefs": [{
            // Set column 0 to non sortable, checkbox hearder is placed
            "targets": [0],
            "orderable": false
        }],
        "order": [[1, "asc"]]
    });
    // Check Uncheck Select All 
        $('table [id*=chkHeader]').click(function () {
            if ($(this).is(':checked')) {
                $('table [id*=chkRow]').prop('checked', true);
            }
            else {
                $('table [id*=chkRow]').prop('checked', false);
            }
        });
    });
    // Check Uncheck Row items and Select All 
        function handleClick(cb)
        {
            var totalRow = $('table [id*=chkRow]').length; 
            var checkSelected = $('table [id*=chkRow]:checked').length;

            if (checkSelected == totalRow )
                $("#tableEmployeeRecords [id*=chkHeader]").prop("checked", true);
            else
                $("#tableEmployeeRecords [id*=chkHeader]").removeAttr("checked");
        }
</script>

JQuery - 仅选择当前表中的所有CheckBox

5 个答案: