在jQuery中选择多个复选框

Question

请考虑以下内容：

mvn package

因此，在此选择器中使用mvn test来检查值是否被检查，如果是，则将一个类应用于与$('#num-locations input[type="checkbox"]').on('click', function(e) { if (e.target.checked) { var location = e.target.dataset.location; $('.manage-wrapper').each(function() { var city = $(this).data('city'); if (city !== location) { $(this).toggleClass('hide-on-location'); } }); } else { $('.hide-on-location').toggleClass('hide-on-location'); } }); 属性不匹配的任何#num-locations input[type="checkbox"]。

当您取消选中上述复选框时，它将删除该类。很好。

这对.manage-wrapper中的一个复选框有效，但是，我在data-中具有多个复选框，由于它们是动态添加的，因此无法单独定位它们。

问题：

我该如何编写此代码，以便如果您选中1个或多个复选框将切换班级，而取消选中一个或多个复选框则将取消班级切换？

示例数据，所有与数据位置#num-locations input[type="checkbox"]不匹配的元素都将被隐藏，很好。取消选中，将显示#num-locations。

现在，检查Sample和Sample时，当我取消选中Sample时，任何与Crab Apple或Sample不匹配的元素都需要隐藏，应显示所有与Crab Apple匹配的元素，但所有与Crab Apple不匹配的元素仍应隐藏。

我无法检查特定属性，因为这是动态的。

Answer 1

听起来您正在尝试创建一组通用的过滤复选框。如果是这样，下面的代码应该可以帮助您。我模拟了HTML，因为您没有将其包含在问题中，但是我认为它应该足够。

这里是一些使用的方法。

• .map()将我们的 elements 集合更改为它们的 data-city 值

• .get()以Array

的形式返回数据值

• .filter()将我们的manage-wrapper选择范围缩小到仅未选中

我还在代码本身中包含了注释，以更详细地记录每个步骤。

$("#num-locations input[type=checkbox]").on("click", refreshFilters);

function refreshFilters() {
  var $checkedInputs = $("#num-locations input[type=checkbox]:checked");
  var $manageWrappers = $(".manage-wrapper");
  
  $manageWrappers.removeClass("hide-on-location");  //Start with all shown
  if (!$checkedInputs.length) return;               //If nothing is checked, exit early

  //Get the checked cities as an array, e.g. ["New York", "Chicago"]
  var cities = $checkedInputs.map(function() { return $(this).data("city") }).get();
  
  //Find any .manage-wrapper whose data-location is NOT in that array, and hide it
  $manageWrappers
    .filter(function() { return !cities.includes($(this).data("location")); })
    .addClass("hide-on-location");
}

  
.hide-on-location { display: none; }
#num-locations { margin-bottom: 10px; }
.manage-wrapper { border: 1px solid #ccc; padding: 10px; margin: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num-locations">
  <input type="checkbox" id="cb1" data-city="New York"> <label for="cb1">New York</label>
  <input type="checkbox" id="cb2" data-city="Seattle">  <label for="cb2">Seattle</label>
  <input type="checkbox" id="cb3" data-city="Chicago">  <label for="cb3">Chicago</label>
</div>

<div class="manage-wrapper" data-location="New York">New York</div>
<div class="manage-wrapper" data-location="Seattle">Seattle</div>
<div class="manage-wrapper" data-location="New York">New York</div>
<div class="manage-wrapper" data-location="Chicago">Chicago</div>
<div class="manage-wrapper" data-location="New York">New York</div>
<div class="manage-wrapper" data-location="Chicago">Chicago</div>
<div class="manage-wrapper" data-location="Seattle">Seattle</div>