Looping List Of Checkboxes in jQuery to Match Duplicate Classes

0 votes
asked Sep 12, 2017 by john-rogerson

I'm trying to identify if someone checks two checkboxes with the same class.

HTML is here:

<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>

And here is what I'm trying in jQuery, but i'm getting the alert (You Signed Up For Too Many Morning Classes) when i click any one of the checkboxes. Any ideas?

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")
    } 
  });
});

2 Answers

+3 votes
answered Sep 12, 2017 by tsr

Firstly, you should move your class="tues_time" onto the input rather than the label.

Once you have done that this should work for you...

// 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")
  }
});

Rather than adding them up to variables in a higher scope, just count them each time there is a change. It's a lot simpler, to read and maintain, which is good! :)

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

+2 votes
answered Sep 12, 2017 by itodd

Here is a working example, you may have to tweak it based on your exact requirements

var $activities = $('.activities input[type="checkbox"]');

//Activities
var tuesMorn = 0;
var tuesAft = 0;

$activities.change(function() {
  var activityClass = $(this).closest('label').attr("class");
  var isChecked = this.checked;

  if (activityClass === 'tues_morn') {
    tuesMorn = isChecked ? tuesMorn + 1 : tuesMorn - 1;
    if (tuesMorn > 1) {
      alert("You Signed Up For Too Many Morning Classes");
    }
  } else if (activityClass === 'tues_aft') {
    tuesAft = isChecked ? tuesAft + 1 : tuesAft - 1;
    if (tuesAft > 1) {
      alert("You Signed Up For Too Many Aft Classe")
    }
  }
});
.tues_morn {
  background: orange;
}

.tues_aft {
  background: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...