基于各种用户行为管理复选框状态

Managing checkbox states based on various user behaviors

本文关键字：管理 复选框 状态 于各种 用户      更新时间：2023-09-26

我有一个复选框列表，我希望在单击"所有校园"框时能够选中所有复选框。或者，当列表中的某个园区未选中时，我希望取消选中"所有园区"复选框，并保持未选中状态，除非我手动选中以前未选中的园区。为了更清楚一点，以下是我正在寻找的程序要处理的场景：

  1. 用户点击"所有校园"，所有复选框都被选中
  2. 用户单击每个园区的每个单独复选框，"所有园区"复选框将自动被选中
  3. 用户取消选中"所有园区"复选框，所有内容都将取消选中
  4. 用户单击"所有园区"复选框，然后选中所有复选框。之后，用户从列表中取消选中其中一个园区，"所有园区"复选框也被取消选中，但其他园区保持不变

我添加了一个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/

谢谢！

我会比较检查列表和输入列表的长度。此外，当你改变道具时，你需要使用道具而不是属性：

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

Fiddle：http://jsfiddle.net/E9KnM/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);
  }
});
相关文章：