Как переключить состояние основного флажка с помощью jQuery - PullRequest
Новая
       4

Как переключить состояние основного флажка с помощью jQuery

1 голос
/ 23 марта 2011

У меня есть список CheckBox, которые ВСЕ включаются / выключаются "главным" CheckBox.Я использую jQuery для этого, и он работает хорошо.

То, что я хотел бы сделать, это отключить «главный» CheckBox всякий раз, когда любой из CheckBoxes в списке не отмечен.Аналогично, если ВСЕ из CheckBox «проверены», я хотел бы также проверить «главный» CheckBox.Таким образом, главный CheckBox является не только средством одновременного включения / выключения всех CheckBox, но и индикатором того, что все они отмечены.

Вот мой текущий код, который переключает флажки... 

<input id="MasterCheckbox" type="checkbox" onclick="toggleChecked(this.checked)" />

<input id="checkbox1" type="checkbox" class="checkboxlistitem" />
<input id="checkbox2" type="checkbox" class="checkboxlistitem" />
<input id="checkbox3" type="checkbox" class="checkboxlistitem" />

Функция jQuery 

function toggleChecked(status) {
  $(".checkboxlistitem").each(function () {
    $(this).attr("checked", status);
  })
}

Есть предложения о том, как заставить основной CheckBox переключаться в зависимости от состояния списка флажков, которыми он управляет?YIPE!Это флажок скороговорки.

Ответы [ 2 ]

4 голосов
/ 23 марта 2011 
$("#MasterCheckbox").change(function() {
    $(".checkboxlistitem").attr("checked", this.checked);
});

$(".checkboxlistitem").change(function() {
    $("#MasterCheckbox").attr("checked", $(".checkboxlistitem:checked").length == $(".checkboxlistitem").length);
});

Вы можете попробовать это здесь.

3 голосов
/ 23 марта 2011

Попробуйте: 

$("#MasterCheckbox").attr("checked", $(".checkboxlistitem:not(:checked)").length==0)

Пример кода: 

<input id="MasterCheckbox" type="checkbox" onclick="toggleChecked(this.checked)" />  
<input id="checkbox1" type="checkbox" class="checkboxlistitem" /> 
<input id="checkbox2" type="checkbox" class="checkboxlistitem" /> 
<input id="checkbox3" type="checkbox" class="checkboxlistitem" /> 

    <script type="text/javascript">  

        function verifyMasterCheckbox() {
                $("#MasterCheckbox").attr("checked", $(".checkboxlistitem:not(:checked)").length == 0);
        }

        $(function() {
                $(".checkboxlistitem").click(function() {
                        verifyMasterCheckbox();
                });
        });
    </script>
...