JQuery Для проверки всех флажков в тд на основе имени класса tr

0

вот мой пример кода

<table id="accessListTable">
<tr class="ui-grid groupHead">
    <td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="1"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="2"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
    <td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="4"/></td>
</tr>
</table>
  1. Например, если флажок в первой строке с классом groupHeadCheck, все флажки с id 1, 2 и 3 также будут проверяться.
  2. И если все флажки 1, 2 и 3 уже отмечены, флажок в первой строке будет проверен.

Пожалуйста, помогите!

  • 0
    Вы можете изменить HTML?
  • 0
    Привет, Пит, я не могу изменить структуру HTML как некоторые ограничения. Благодарю.
Показать ещё 1 комментарий
Теги:

4 ответа

1
Лучший ответ

Я уверен, что это можно сделать красивее, но это основная идея:

$("table tbody").on("change", "input[type=checkbox]", function (e) {
    var currentCB = $(this);
    var isChecked = this.checked;
    if (currentCB.is(".groupHeadCheck")) {
        var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
        allCbs.prop('checked', isChecked);
    } else {
        var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
        var allSlaves = allCbs.not(".groupHeadCheck");
        var master = allCbs.filter(".groupHeadCheck");
        var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
        master.prop("checked", allChecked);
    }
});

и если вам нужно запустить код, чтобы принудительно проверить все состояние

$(".groupHead").next().find("[type=checkbox]").change();

JSFiddle

Поделиться
  • 0
    Спасибо, это работает для № 1 вопроса, но мне также нужно решить № 2.
  • 0
    Я ответил что
Показать ещё 2 комментария
2

Вы можете добавить обработчик кликов в группу, а внутри обработчика вы можете найти его tr-элемент и следующий следующий элемент sibling до следующего появления tr.groupHead

$(function ($) {
    $(".groupHeadCheck").on("click", function (event) {
        $(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
    })
});

Демо: скрипка

Поделиться
  • 0
    Позвольте мне проверить в первую очередь.
  • 0
    Привет Арун, это работает, если проверен groupHeadCheck все флажки установлены. Но мне также нужно, если все флажки, такие как 1,2 и 3, уже установлены, будет проверен первый флажок groupHeadCheck . У меня две страницы, такие как просмотр и редактирование.
Показать ещё 2 комментария
0

Я знаю, что это уже ответили, но я хотел более общий способ сделать это. В моем случае я хотел проверить все в столбце, пока не ударил новую группу. У меня также было 3 столбца с флажками. В первом столбце флажка были имена, начинающиеся с "S_", второго "A_" и третьего "C_". Я использовал это, чтобы выбрать флажки, которые я хотел. Я также не назвал флажки заголовка, которые использовались для выполнения "проверки всех", чтобы он остановился, когда он попал в следующую группу группировок.

Вы можете использовать имя класса для применения той же логики.

Во-первых, вот что такое check all checkbox выглядит так:

    <td>
        <input type="checkbox" onchange="checkAll(this, 'S_');" />
   </td>

Затем функция javascript вызывает при нажатии:

function checkAll(sender, match)
{
    var table = $(sender).closest('table').get(0);
    var selector = "input[type='checkbox'][name^='" + match + "']";

    for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
    {
        var cb = $(table.rows[i]).find(selector).get(0);
        if (cb === undefined)
            break;

        if ($(cb).is(':enabled'))
           cb.checked = sender.checked;

    }
}

Поэтому он будет искать каждую следующую строку для флажка с именем, начинающимся с "S_". Изменятся только те флажки, которые пользователь имеет права. Я собирался использовать $ (td).index(), чтобы найти правильный столбец, но это не сработало, потому что у некоторых строк было colspan больше 1.

Поделиться
0

Это проверит все, если первый флажок (или снимите отметку со всех)

$(document).on('click', '.groupHeadCheck',function() {
     $(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', $(this).prop('checked'))
});

вы можете немного поиграть со своими классами (или идентификаторами), чтобы сделать это правильно для вас

Поделиться
  • 1
    вам нужно было бы использовать опору для проверки и снятия флажка - по какой-то причине у attr есть ошибки с ним при установке проверенного статуса - см. этот пост
  • 0
    никогда не замечал этого, но я приму ваше слово и запомню это :)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню