JQuery - выбрать все флажки только в текущей таблице

Question

У меня есть два вложенных повторителя в C #. Внешний имеет некоторую информацию о группировании, а внутренний имеет таблицу с числом флажков X.

Так что у меня будет Y количество таблиц. В верхней части каждой таблицы будет установлен флажок (а также флажок в каждой строке). То, что я хочу сделать, это иметь возможность установить все флажки в одной таблице из флажка в верхней части каждой таблицы.

Я могу установить ВСЕ флажки за один раз:

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

Я просто не могу понять, как сузить выбор до текущей таблицы (флажок вверху каждой таблицы находится в строке th).

Спасибо

РЕДАКТИРОВАТЬ ... извините, забыл упомянуть, что мы находимся на 1.26 JQuery и не уверены, что мне вообще разрешено поднимать нас. Что означает, что «ближайший» не существует.

Answer 1

Что-то вроде следующего должно сделать это

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

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

});

Вот Рабочая демонстрация с двумя таблицами, вложенными в другую таблицу (семантически ужасно, я признаю) Добавьте / edit к URL, чтобы увидеть код

РЕДАКТИРОВАТЬ:

Поскольку вы все еще используете 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

// Это работает для меня

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

Answer 5

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

Примечание. Похоже, что все флажки select-all-in-this-table-table имеют одинаковые id, id должно быть уникальным на странице, вместо этого следует использовать класс. (Или просто table th input)