jQueryを使って、
1. 1つ以上選択されているかのバリデーションチェック。
2. 親のチェックに連動して、子全てが一括選択/解除される。
3. 子のチェックに連動して、親が選択/解除される。
をつくります。
jQuery関連記事
【jQuery】pdfが存在するか、mimeタイプのバリデーションする
jQuery UIのsortableを使ってリストをドラッグで並び替える
jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する
HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる
bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種
bxSliderの使い方と、オプションでのカスタマイズ方法
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる
1. チェックボックスが1つ以上選択されているかのバリデーション
HTML
<ul> <li> <input type="checkbox" value="1" id="parent1" class="parent set_check student"> <label for="parent1">指導対象</label> </li> <li> <input type="checkbox" value="1" id="child1" data-parent="parent1" class="child set_check student"> <label for="child1">大学生</label> </li> <li> <input type="checkbox" value="1" id="child2" data-parent="parent1" class="child set_check student"> <label for="child2">高校生</label> </li> <li> <input type="checkbox" value="1" id="child3" data-parent="parent1" class="child set_check student"> <label for="child3">中学生</label> </li> </ul> <button id="require_check">確認</button>
親が「指導対象」、子が「大学生・高校生・中学生」です。
チェックしたいグループのすべてのチェックボックスに同じclassをつけます。上の例ではstudent
です。
JavaScript(function)
function checkbox_check(classname, category) { var c = 0; $('.' + classname).each(function () { if ($(this).prop('checked')) { c++; } }); if (c == 0) { $('#errorbox').append(category + "は一つ以上チェックしてください。<br>"); } }
functionの引数である、classname
にclass名を渡すことで、いろんな場所でチェックできるようになります。
全ての該当classを確認しに行って、選択されていればcをインクリメント。
最終的にcが0ならエラーを出します。
JavaScript(呼び出し側)
$('#require_check').click(function () { checkbox_check("student", "指導対象"); });
functionの引数である、classname
にstudent
を、category
にエラー時に表示する項目
を渡して呼び出します。
2. 親のチェックに連動して、子全てが一括選択/解除される
JavaScript
$('.parent').click(function () { var now = $(this).prop('checked'); var getid = $(this).attr('id'); $('.child[data-parent="' + getid + '"]').each(function () { $(this).prop('checked', now); }); });
親がクリックされたら、親の選択状態をnow
に格納します。
親のidと、子のdata-parent
を同じにしてあるので、それらすべてをnow
を使って同じにします。
3. 子のチェックに連動して、親が選択/解除される
JavaScript
$('.child').click(function () { var getid = $(this).data('parent'); var c = 0; $('.child[data-parent="' + getid + '"]').each(function () { if ($(this).prop('checked') == true) { $("#" + getid).prop('checked', true); } if ($(this).data('parent') == getid && $(this).prop('checked') == true) { c++; } if (c == 0 && $("#" + getid).prop('checked') == true) { $("#" + getid).prop('checked', false); } }); });
今度は逆で、子がクリックされたら、子のdata-parent
から親のidを取得し、子の選択状態に合わせて親も同じにしています。
コメント