Grouped Checkboxes

by David Nabb

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="day-boxes">
<input type="checkbox" name="day[]" value="Mon"/>
<input type="checkbox" name="day[]" value="Tue"/>
<input type="checkbox" name="day[]" value="Wed"/>
<input type="checkbox" name="day[]" value="Thu"/>
<input type="checkbox" name="day[]" value="Fri"/>
<input type="checkbox" name="day[]" value="Sat"/>
<input type="checkbox" name="day[]" value="Sun"/>
<input type="checkbox" name="day[]" value="Any"/>
<span id="anycheck"></span><span id="othercheck"></span>
</div>

JavaScript

anyChecked = otherChecked = false;
jQuery(document).ready(function() {
	jQuery('.day-boxes input[name="day[]"]').on('change', function() {
  	prevAnyChecked = anyChecked;
		jQuery.each(jQuery('.day-boxes input[name="day[]"]:checked'), function() {
  		if (jQuery(this).attr("value") !== "Any") {
        jQuery('#othercheck').html(jQuery(this).attr("value") + " was checked");
      	if (prevAnyChecked) {
        	jQuery('#anycheck').html("Any was already checked");
        } else {
          jQuery('#anycheck').html("Any wasn't already checked");
        }
      	otherChecked = true;
      } else {
        anyChecked = true;
      }
    });
    
	});
});