jQueryでチェックボックスの全チェック&チェック解除

2016/04/01

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」という機能をつけたかった。jQueryで出来たのでメモ。

■ソース

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function allCheck( mode ){
	var change = ( mode ) ? true : false;
	$('input[name=test]').prop('checked', change);
}
</script>
</head>
<body>
	<a href="javascript:void(0);" onclick="allCheck(1);">全てチェック</a><br>
	<a href="javascript:void(0);" onclick="allCheck(0);">チェックを外す</a><br>

	<input type="checkbox" name="test" value="1">1<br>
	<input type="checkbox" name="test" value="2">2<br>
	<input type="checkbox" name="test" value="3">3<br>

</body>
</html>

<head>

<title>checkbox</title>

function allCheck( mode ){

var change = ( mode ) ? true : false;

$('input[name=test]').prop('checked', change);

}

</script>

</head>

<body>

<a href="javascript:void(0);" onclick="allCheck(1);">全てチェック</a><br>

<a href="javascript:void(0);" onclick="allCheck(0);">チェックを外す</a><br>

</body>

</html>

■prop()って何？

prop(name)で指定した属性の値を取得、prop(name, value)で指定した属性の値を設定できるみたい。attr()と似ているけどinput関連の値を触る時はprop()で、その他はattr()を使うのが良いらしい。

■リファレンス

http://js.studio-kingdom.com/jquery/attributes/prop

- jQuery

: jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

: adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

: AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

: jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

: jQueryでドロワーメニューの作成

■やりたかった事スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

: プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを作りたかった。内容としては、・ターゲ ...

: 画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

: jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

: jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使える ...

: prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースにあたったのでメモ。 ↓↓の ...

PREV: PHPでメルマガを配信する方法
NEXT: PHPでメルマガを配信する方法2

jQueryでチェックボックスの全チェック&チェック解除

関連記事