チェックボックス一括変更

チェックがいっぱいあるときちまちまと変えていくのは面倒ですよね!チェックボックスを一括で変更できる方法があります。
またしてもjQuery!
ちなみにチェックボックスやラジオボタンでよく使われるlabelタグなのですが実はあれすごく便利な要素だと言うことを最近知りました。。。。


スポンサーリンク

1
2
<label><input type="checkbox" />チェック1</label>
<input type="checkbox" id="all" /><label for="all">すべて</label>

上記のようにチェックボックスでlabelを囲んだりid属性をforで囲むことで文字までがチェックの対象になるのです。
それによってユーザビリティーを上げるというわけです。確かにクリックしやすいです。デモサイトで試してみて下さい!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
		$(function() {
			var all = $('#all'),
				checkboxes = $('p.checkboxes input');
 
			all.click(function() {
				if ( this.checked ) {
					checkboxes.attr('checked', 'checked');
				} else {
					checkboxes.removeAttr('checked');
				}
			});
		});
	</script>

デモサイト

Pocket
LINEで送る

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です