SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

jqueryでチェックボックスを扱うときメモ

※jquery1.6付近でいろいろありましたが、jquery1.6.1以降で。

チェックする

$('.myCheckbox').prop('checked', true)

チェックをはずす

$('.myCheckbox').prop('checked', false)

チェックされているか確認する

//true/falseが返ってくる
if (this.checked) { /* チェックされているときの処理 */ }

もしくは

//true/falseが返ってくる
$('#myCheckbox').prop('checked');

もしくは

//true/falseが返ってくる
$('#myCheckbox').is(':checked');

活用例

tableで一覧表示しているときに、見出し行に置いたチェックボックスで、一覧の各行のチェックボックスを一括でON/OFFする例。

Javascript

//見出し行のチェックボックスに class="js-checkAllInTable" などのクラス名を付けておくとする
$(function() {
	//一覧での全チェック
	$('.js-checkAllInTable').on('click', function(){
		$(this).parents('table:eq(0)').find('input[type="checkbox"]').prop('checked', this.checked);
	});
});

DEMO

No.
1
2
3
4
5

関連するメモ

コメント