yuheijotaki.com

2014/02/13 : 
jQueryでチェックボックス

リスト全体をクリックした際にチェックボックスをオン・オフさせたいとき少しはまる

<!-- HTML -->
<div class="list">
	<input type="checkbox" id="check1"><label for="check1">checkbox</label>
</div>
// JS
$('.list,#check1,label').click(function () {
	if ($('#check1').prop('checked')) {
		$('#check1').prop("checked", false);
	} else {
		$('#check1').prop("checked", true);
	}
});

.propはプロパティの真偽を、.attrは属性値を取るそうなので、元々checkedが入ってない場合.attrは使いにくいそうです。

 

またdiv.listセレクタクリック時のみのイベントではチェックボックス本体を押した際に挙動がおかしくなったので、セレクタにinputとlabelも含めるとうまくいきました。