Выбор и снятие основного флажка на основе дочерних флажков с помощью jQuery

#jquery #forms #checkbox

#jquery #формы #флажок

Вопрос:

Я использую jQuery, и у меня есть приведенный ниже HTML-код с флажками в нем. У меня есть один главный флажок, вызываемый chkSelectAll , и дочерние флажки внутри DIV.

  <div class="selectallitems">
                    <div class="selectall">
                        <asp:CheckBox ID="chkSelectAll" CssClass="selectall-txt" runat="server" />
                    </div>
                    <div id="divCheckAll">
                        <div class="selectall">
                            <asp:CheckBox ID="chkItemLists" CssClass="selectall-txt-1" runat="server" />
                            <div class="clear">
                            </div>
                        </div>
                        <br />
                        <div class="selectall">
                            <asp:CheckBox ID="chkComponentLinks" CssClass="selectall-txt-1" runat="server" />
                            <div class="clear">
                            </div>
                        </div>
                        <br />
                        <div class="selectall">
                            <asp:CheckBox ID="chkResourceKeyData" CssClass="selectall-txt-1" runat="server" /></div>
                        <br />
                    </div>
                </div>

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

Пожалуйста, предложите!!

Ответ №1:

Это оптимизированная и более компактная версия. Остальные должны работать нормально, но они все время запускают селекторы без необходимости. Здесь все селекторы сохраняются в начале.

 var $selectAll=$('#chkSelectAll'),
    $checks=$('#divCheckAll :checkbox');

$selectAll.change(function () {
    $checks.attr('checked', this.checked);
});

$checks.change(function () {
    $selectAll.attr('checked', $checks.not(':checked').length==0);
});

Демонстрация jsFiddle

Ответ №2:

Для моего приложения я использовал что-то вроде этого:

 // This would select / deselect all.
$('#chkSelectAll').change(function() {
    $('.selectall-txt-1').attr('checked', this.checked);
});

Для основного флажка выбора вы могли бы использовать что-то вроде этого:

 $('.selectall-txt-1').change(function() {        
    var checkedAll = $('.selectall-txt-1 :checked').length == $('.selectall-txt-1').length;
    $('#chkSelectAll').attr('checked', checkedAll);            
});

1. спасибо @enoyhsm, но это приведет только к выбору и отмене выбора в соответствии с главным флажком, однако я хочу, чтобы, если пользователь снял какой-либо из дочерних флажков, тогда главный флажок также должен быть снят, и то же самое, если пользователь снова установит все три флажка, тогда главный флажок автоматически будет установлен снова.

2. Обновлен ответ. Необходимо перепроверить, весь ли синтаксис в порядке. Но идея правильная.

Ответ №3:

Я придумал это:

 // Master checkbox
$(".selectall input[type=checkbox]").change(function() {
    $("#divCheckAll input[type=checkbox]").attr("checked", this.checked);
});

// Child checkboxes
$("#divCheckAll input[type=checkbox]").change(function() {
    var isAllChecked = $(".selectall input[type=checkbox]:checked").length == 3;
    $(".selectall input[type=checkbox]").attr("checked", isAllChecked);
});

1. то, что вы пытаетесь сделать здесь, поскольку этот код у меня не работает. Код главного флажка в порядке, что насчет дочерних флажков

2. Я проверяю, есть ли у нас 3 отмеченных дочерних флажка. Если true, мы устанавливаем флажок masetr chcekbox, если false, мы снимаем флажок master.

Ответ №4:

Это очень похоже на ответ Олега Г., за исключением того, что длина не задана жестко, я использую removeAttr, чтобы снять флажок, и я использую отличный :checkbox селектор jQuery:

 $.masterCheck = function(master, boxes) {
  master.change(function() {
    if (master.is(':checked'))
      boxes.attr('checked', 'checked')
    else
      boxes.removeAttr('checked')
  });

  boxes.change(function() {
    if (boxes.is(':not(:checked)'))
      master.removeAttr('checked')
    else
      master.attr('checked', 'checked')
  });
};

$.masterCheck($('.selectall:checkbox'), $('#divCheckAll:checkbox'));