Выбор и отмена выбора основного флажка на основе дочерних флажков с использованием JQuery

Question

Я использую 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 также будет снят.

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

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

Answer 2

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

// 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);
});

Answer 3

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

// 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);            
});

Answer 4

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

$.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'));