Check all (Prototype)

by Alexander Zonov

HTML

<div class="case case_checkbox">
  <input class="switch" type="checkbox" name="switcher" data-target-name="case_checkbox">Check all<br/>
  <input type="checkbox" name="case_checkbox">option 1<br/>
  <input type="checkbox" name="case_checkbox">option 2<br/>
</div>
<hr/>
<div class="case case_button">
  <button class="switch" data-target-name="case_button">Check all</button><br/>
  <input type="checkbox" name="case_button">option 1<br/>
  <input type="checkbox" name="case_button">option 2<br/>
  <input type="checkbox" name="case_button">option 3<br/>
</div>
<div class="case case_button">
  <input type="radio" name="" class="switch" data-target-name="case_radio">Check all</button><br/>
  <input type="checkbox" name="case_radio">option 1<br/>
  <input type="checkbox" name="case_radio">option 2<br/>
  <input type="checkbox" name="case_radio">option 3<br/>
</div>

JavaScript

function switcherGood($switcher) {
	return $switcher.length !== 0 && $switcher.attr('name') !== $switcher.data('target-name') && !$switcher.is('input[type=radio], input[type=text], input[type=password], textarea');
}

function targetsGood($targets) {
	return $targets.length !== 0;
}

$('.case').each(function(index, container) {
  var $switcher = $(container).find('.switch');

  if (!switcherGood($switcher)) {
   	return; 
  }
  
  var targetSelector = $switcher.data('target-name');
  var isSwitcherAnCheckbox = $switcher.is('input[type=checkbox]');
  var $targets = $(container).find('input[type=checkbox][name=' + targetSelector + ']');

	// if this case not proper and has not all components
  if (!targetsGood($targets)) {
		return;
  }

  if (isSwitcherAnCheckbox) {
    // handler on change
		$switcher.on('change', function(e) {
    	if (e.target.checked) {
      	$targets.prop('checked', true);
      } 
    });
    
    $targets.on('change', function(e) {
    	if(!e.target.checked) {
      	$switcher.prop('checked', false);
      }
    });
  } else if (!isSwitcherAnCheckbox) {
    // handler on click
		$switcher.on('click', function(e) {
    	$targets.prop('checked', true);
    });
  }
});