今日の人気記事

  1. 指定した要素の高さや横幅にアニメ効果を「CSS Animate Auto」

チェックボックスの全選択 / 全解除を実装「Master Checkbox」

当ページのリンクには広告が含まれています。

スポンサーリンク

チェックボックスの全選択 / 全解除を実装するプラグイン「Master Checkbox」を紹介します。

jQueryプラグイン「Master Checkbox」

このプラグインを使えば、複数あるチェックボックスをグループ化し、それらすべてにチェックを入れる、あるいはすべてのチェックを外すチェックボックスを簡単に作成することができます。

スポンサーリンク

デモで、チェックボックスの全選択 / 全解除を確認してみてください。

「Master Checkbox」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Master Checkboxのデモでーす。">
<title>Master Checkbox - jQuery Plugin Demo</title>
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.mastercheckbox.js"></script>
</head>
<body>
<h1>Master Checkboxのデモでーす。</h1>

<fieldset id="set-1" class="check-group">
<p class="master">
  <label><input type="checkbox" value="1" />全選択 / 全解除</label>
</p>
<p>
  <label><input type="checkbox" value="1" />項目①</label>
</p>
<p>
  <label><input type="checkbox" value="1" />項目②</label>
</p>
<p>
  <label><input type="checkbox" value="1" />項目③</label>
</p>
</fieldset>

<script>
  $('.check-group').masterCheckbox();
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)