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

Tweet

Category JavaScript 2012/06/01

※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