javascript - jQuery 中的循环复选框列表以匹配重复的类

Question

我正在尝试确定是否有人选中了同一类的两个复选框。

HTML 在这里:

<fieldset class="activities">
  <legend>Register for Activities</legend>
  <label>
    <input type="checkbox" name="all"> Main Conference — $200
  </label>
  <label class="tues_morn">
    <input type="checkbox" name="js-frameworks"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100
  </label>
  <label class="tues_aft">
    <input type="checkbox" name="js-libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100
  </label>
  <label class="tues_morn">
    <input type="checkbox" name="express"> Express Workshop — Tuesday 9am-12pm, $100
  </label>
  <label class="tues_aft">
    <input type="checkbox" name="node"> Node.js Workshop — Tuesday 1pm-4pm, $100
  </label>          
  <label>
    <input type="checkbox" name="build-tools"> Build tools Workshop — Wednesday 9am-12pm, $100
  </label>
  <label> 
    <input type="checkbox" name="npm"> npm Workshop — Wednesday 1pm-4pm, $100
  </label>
</fieldset>

这是我在 jQuery 中尝试的，但是当我单击任一复选框时，我收到警报(您注册了太多早间类(class))。有什么想法吗？

var $activities = $('.activities > label');

//Activities
var tuesMorn = 0
var tuesAft = 0
$activities.each(function(){
  var activityClass = ($(this).attr("class"));
  $activities.change(function(){
    if (activityClass === 'tues_morn'){
      tuesMorn += 1;
    } else if (activityClass === 'tues_aft'){
      tuesAft +=1;
    } 
    if (tuesMorn > 1) {
      alert("You Signed Up For Too Many Morning Classes");
    } else if (tuesAft > 1) {
      alert ("You Signed Up For Too Many Aft Classe")
    } 
  });
});

Answer 1

首先，您应该将 class="tues_time" 移至输入而不是标签上。

完成后，这应该对您有用......

// Get the inputs, rather than the labels
var checkBoxes = $('.activities > label > input');

checkBoxes.change(function() {
  var tuesMorn = checkBoxes.filter('.tues_morn:checkbox:checked').length;
  var tuesAft = checkBoxes.filter('.tues_aft:checkbox:checked').length;
  if (tuesMorn > 1) {
      alert("You Signed Up For Too Many Morning Classes");
  } else if (tuesAft > 1) {
      alert ("You Signed Up For Too Many Aft Classe")
  }
});

与其将它们添加到更高范围的变量中，不如在每次发生变化时对它们进行计数。阅读和维护都简单多了，这很好! :)

https://jsfiddle.net/8Lk6g2nf/1/