Question

我有一个复选框列表，我希望能够在点击“所有校园”框时检查所有复选框。或者，我希望“所有校园”复选框取消选中列表中的其中一个校园未经检查并保持未选中状态，除非我手动检查我以前取消选中的校园。为了更清楚一点，这里是我正在寻找的程序：

用户点击“所有校园”并选中所有复选框
用户点击每个校园的每个单独复选框，并自动选中“所有校园”复选框。
用户取消选中“所有校园”复选框，一切都取消选中。
用户点击“所有校园”复选框，然后选中所有复选框。之后，用户从列表中取消选中其中一个校园，并且未选中“所有校园”复选框，但其余校园保持不变。

我添加了一个jsFiddle与我现在拥有的。它目前处理方案1,3和4，但我遇到麻烦处理2.任何想法？

<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

我会比较已检查列表和输入列表的长度。此外，当您更改它时，您需要使用prop而不是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);
  }
});

根据各种用户行为管理复选框状态

2 个答案: