Select All checkboxes in jQuery

by Faisal Khan Janjua

HTML

<div class="row">
  <div class="col-sm-12">
    <input type="checkbox" class="selectAllOptions" id="all" value="" />
    <label for="all">Select All</label>
  </div>
  <div class="col-sm-12">
    <input type="checkbox" id="b" class="checkboxes" value="b" />
    <label for="b">Select B</label>
  </div>
  <div class="col-sm-12">
    <input type="checkbox" id="c" class="checkboxes" value="c" />
    <label for="c">Select C</label>
  </div>
  <div class="col-sm-12">
    <input type="checkbox" id="d" class="checkboxes" value="d" />
    <label for="d">Select D</label>
  </div>
  <div class="col-sm-12">
    <input type="checkbox" id="e" class="checkboxes" value="e" />
    <label for="e">Select E</label>
  </div>
</div>

JavaScript

$(document).on('change', '.selectAllOptions', function(){
	if($(this).is(':checked')){
  	$(this).closest('.row').find('input[type="checkbox"]').prop('checked', true);
  }
  else {
  	$(this).closest('.row').find('input[type="checkbox"]').prop('checked', false);
  }
});
$(document).on('change', '.checkboxes', function(){
  var checkedCount = 0;
  var checkBoxes = $(this).closest('.row').find('.checkboxes').length;
  $(this).closest('.row').find('.checkboxes').each(function(){
  	if($(this).is(':checked')){ checkedCount++; }
  });
  if(checkBoxes == checkedCount){
  	$(this).closest('.row').find('.selectAllOptions').prop('checked', true);
  }
  else { $(this).closest('.row').find('.selectAllOptions').prop('checked', false); }
});