根据不同的用户行为管理复选框状态

Question

我有一个复选框列表，当我点击“所有的校园”框时，我希望能够检查所有的复选框。或者，我希望在“所有校园”复选框中，当列表中的一个校园未被选中时取消选中，除非我手动检查以前未选中的校园，否则保持未选中。为了更清楚一点，下面是我要处理的scenarious程序：

1. 用户单击“所有校园”并选中所有复选框。
2. 用户单击每个校园的单个复选框，自动选中“所有校园”复选框。
3. 用户取消选中“所有校园”复选框，所有内容都不被选中。
4. 用户单击“所有校园”复选框，然后选中所有复选框。之后，用户从列表中取消其中一个校园，“所有校园”复选框未被选中，但其余的校园保持不变。

我用我目前所拥有的添加了一个jsFiddle。它目前处理场景1、3和4，但是我在处理它时遇到了问题。有什么想法吗？

<input name="statewideCampus" type="checkbox" value="New" class="radio allCampuses" />All Campuses
<br />
<br />
<table style="width: 100%" class="campuses">
    <tr>
        <td>
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Apache Junction
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Aravaipa
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Bullhead City
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Chandler-Gilbert
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Chinle
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Communiversity @ Surprise
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />East Valley
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Fort Defiance
            <br />
        </td>
        <td>
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Ganado
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />GateWay
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Glendale
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Kayenta
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Keams Canyon
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Lake Havasu City
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Mesa
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />North Valley
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Paige
            <br />
        </td>
        <td>
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Paradise Valley
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Phoenix
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Phoenix Biomedical
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Prescott
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Scottsdale
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Show Low
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Signal Peak
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />South Mountain
            <br />
        </td>
        <td>
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Thatcher
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Tuba City
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Tucson
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Tucson North
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Verde Valley
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />West Valley
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Whiteriver
            <br />
            <input name="statewideCampus" type="checkbox" value="New" class="radio" />Yavapai
            <br />
        </td>
    </tr>
</table>

下面是jQuery：

$('.allCampuses').attr('checked', true);
$('.campuses input').attr('checked', true);

$('.allCampuses').click(function () {
    if ($(this).is(':checked')) {
        $('.campuses input').attr('checked', true);
    } else {
        $('.campuses input').attr('checked', false);
    }
});

$('.campuses input').click(function () {
    if ($(this).is(':checked')) {
        $('.allCampuses').attr('checked', true);
    } else {
        $('.allCampuses').attr('checked', false);
    }
});

http://jsfiddle.net/E9KnM/

谢谢!

Answer 1

我将比较检查的输入列表和输入列表的长度。此外，当您正在更改道具时，您需要使用道具而不是attr：

$('.allCampuses, .campuses input').attr('checked', true);

$('.allCampuses').on('change', function () {
    $('.campuses input').prop('checked', $(this).is(':checked'));
});

$('.campuses input').on('change', function() {
  $('.allCampuses').prop('checked', $('.campuses input').length == $('.campuses input:checked').length);
});

小提琴：http://jsfiddle.net/E9KnM/2/

Answer 2

$('.campuses input').click(function () {
  if ($(this).is(':checked')) {
    $('.allCampuses').attr('checked', true);
       var totalCheckes = $( ".campuses input" ).length;
       var totalCheckedCheckBox = $( ".campuses input:checked").length;

       if(totalCheckes == totalCheckedCheckBox){
          $('.allCampuses').prop('checked', true);
       }
    } else {
    $('.allCampuses').attr('checked', false);
  }
});