Флажки Jquery внутри содержащего вопрос селектора таблиц

Question

Мой текущий код:

<script type="text/javascript">
    function checkAll(checked) {
        $("input[type='checkbox']:not([disabled='disabled'])").attr('checked', checked);
    }
</script>
<input type="checkbox" id="cbxSelectAll" onclick="checkAll(this.checked);" />

Краткая версия:

Как изменить приведенный выше вызов функции и метод для проверки всех флажков внутри таблицы, содержащей элемент формы checxbox.

Длинная версия:

Я создаю WebUserControl, содержащий представление сетки в asp.net, в котором будет опция удаления. Я хотел бы, чтобы удаление было серией флажков с одним полем в заголовке, чтобы выбрать все из них. Для людей, не являющихся пользователями ASP.NET, это означает, что таблица со строкой заголовка имеет флажок, а в каждой строке также есть поле checxbox.

Я использовал приведенный выше код для проверки всех полей на всей странице. Здесь это не сработает, потому что я хочу, чтобы на странице было несколько таких текстов, каждый из которых работал бы независимо. Я знаю, что мог бы использовать селектор, чтобы выбрать все поля, если бы я идентифицировал таблицу, но это потребовало бы некоторого кодирования, чтобы присвоить уникальное имя таблице, а затем поместить это имя в блок сценария.

На самом деле я хотел бы изменить приведенный выше сценарий, чтобы установить все флажки в содержащейся таблице поля «выбрать все». Таблица, содержащая флажок, может быть вложена в другие, но я не вижу в ней вложенности или, если она есть, и вложенная таблица также содержит флажки checxbox, мне все равно, будут ли они выбраны.

Спасибо за вашу помощь.

Answer 1

Измените свой встроенный атрибут на это:

<input type="checkbox" id="cbxSelectAll" onclick="checkAll.call(this);" />

И ваши checkAll() к этому:

function checkAll() {
    $(this).closest('table').find("input:checkbox:enabled").attr('checked', this.checked);
}

Используя .call(), он вызывается из контекста элемента, по которому щелкнули.

Затем jQuery получает closest() ^{(документы)} <table> и находит входы, используя checkbox-selector ^{(документы)} и enabled-selector ^{(документы)} .

Затем при использовании метода attr() ^{(документы)} вы можете использовать this.checked для установки флажков в текущее состояние одного проверено.

Answer 2

Во-первых, не смешивайте ваш HTML и Javascript. Вместо этого используйте привязку обработчика событий.

Во-вторых, используйте closest, чтобы получить ближайший элемент-предок определенного типа:

$(document).ready(function(){
    $('#cbxSelectAll').click(function() {
        $(this)
            .closest('table') // get the parent table element
            .find("input:checkbox:enabled") // find children that match the selector
            .attr('checked', this.checked); // set their checked value
    });
});

Answer 3

Вы можете найти таблицу, содержащую выбор всех, используя .closest

function checkAll(checked) {
    var $table = $(this).closest('table');
    $table.find("input[type='checkbox']:not([disabled='disabled'])")
          .attr('checked', checked);
}

Если может быть несколько вложенных таблиц, часто проще всего указать ту, которая вам нужна, с классом, например, $(this).closest('table.tableOfCheckboxes'); где вы добавляете class tableOfCheckboxes в таблицу, которую хотите найти.