チェックボックスの全選択・全解除を行うスクリプト平成30年 8月 13日 作成
概略
作成するページにて、チェックボックスの数が増えてき、全選択・全解除機能を持たせたくなある場面がでてきた。
全選択・全解除機能を理解し、自分でコードが書ける様に。
手段
JavaScriptにて実現可能。（今回はjQueryを使用。）
jQuery動作の流れ
全選択・全解除のチェックボックスにクリックしたら動作する関数を作成。
クリックと同時にチェックが入るので入ったら、クラス付けした他のチェックボックスにcheckedを入れる。
それと同時にテキストの変更も行う。
実装方法
HTML
<input type="checkbox" id="btn-01" class="select_item" /><label for="btn-01">1</label> <input type="checkbox" id="btn-02" class="select_item" /><label for="btn-02">2</label> <input type="checkbox" id="btn-03" class="select_item" /><label for="btn-03">3</label> <input type="checkbox" id="btn-all" /><label for="btn-all" id="change">全選択</label>
CSS
// 全選択・全解除のチェックボックは非表示にする
#container input#btn-all{
display: none;
}
jQuery
$(function(){
$("#btn-all").click(function() {
if($("#btn-all").attr("checked")){
$(".select_item").attr("checked", true);
$("#change").text("全解除");
}else{
$(".select_item").attr("checked", false);
$("#change").text("全選択")
}
});
});
デモ
考察
とりあえず目的は達成できたが、また良い方法がありそう。
学習しながら他の方法も模索する。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
