iCheckで全選択、全解除、全反転を実装する

ネットで上の内容を調べると結構小難しいやり方ばかりが見つかりました。
もっとシンプルにできたので忘れないうちに掲載します

デモ

HTML

<div>
	<a href="#" data-target=".sample" class="btn_check_all_on">全選択</a>
	<a href="#" data-target=".sample" class="btn_check_all_off">全解除</a>
	<a href="#" data-target=".sample" class="btn_check_all_revert">全反転</a>
</div>
<ul>
	<li><label><input type="checkbox" class="sample" value="1">1<label></li>
	<li><label><input type="checkbox" class="sample" value="2">2<label></li>
	<li><label><input type="checkbox" class="sample" value="3">3<label></li>
	<li><label><input type="checkbox" class="sample" value="4">4<label></li>
</ul>

1. checkboxに適当なクラス名をつけます
2. ボタン要素にdata-target属性をもたせ、そのクラス名のセレクタをつけます
3. ボタン要素のクラス名を次のようにします。

全選択 -> btn_check_all_on
全解除 -> btn_check_all_off
全反転 -> btn_check_all_revert

JavaScript

(function($){
'use strict';

 /**
 * init iCheck for checkbox and radion buttons.
 *
 *
 * @link http://icheck.fronteed.com/
 */
function initICheck(elem)
{
  var elem = elem !== undefined ? elem : "input[type=checkbox], input[type=radio]";
  var options = {
    checkboxClass : "icheckbox_flat-blue",
    radioClass : "iradio_flat-blue",
  };

  $(elem).iCheck(options);
}

/**
 * Checkbox State Change With iCheck.js
 *
 * @link http://alphasis.info/2011/10/jquery-checkbox-all/
 * @link https://github.com/fronteed/icheck/issues/298
 */
function initICheckControls()
{
  iCheckAllOn();
  iCheckAllOff();
  iCheckAllRevert();
}

function iCheckAllOn(elem)
{
  var elem = elem !== undefined ? elem : ".btn_check_all_on";

  $(elem).click(function(){
    var target = $(this).data('target');
    $(target).prop('checked', true).iCheck('update');
  });
}

function iCheckAllOff(elem)
{
  var elem = elem !== undefined ? elem : ".btn_check_all_off";

  $(elem).click(function(){
    var target = $(this).data('target');
    $(target).prop('checked', false).iCheck('update');
  });
}

function iCheckAllRevert(elem)
{
  var elem = elem !== undefined ? elem : ".btn_check_all_revert";

  $(elem).click(function(){
    var target = $(this).data('target');
    $(target).prop('checked', function(index, oldValue){ return !oldValue; }).iCheck('update');
  });
}

})(jQuery);

initICheck関数はiCheckを呼び出しています。
おそらくこれを読んでいる人は既にこれにあたる内容を実装済みだと思いますので、この関数は必須ではありません。

initICheckControls関数に、全選択、全解除、全反転の機能を集約しています。これが今回の実装の主です。

使い方

$(function(){
  initICheck();
  initICheckControls();
});

当然ながらjQueryとiCheckを事前に読み込んでいる必要があります。

参考にしたURL

• http://alphasis.info/2011/10/jquery-checkbox-all/
• https://github.com/fronteed/icheck/issues/298