jQuery チェックボックスの全チェック、外しを実装(修正版)

jQuery

jQuery

以前、ECCUBEでチェックボックスの

全チェックと外すことを実装したのですが
((EC-CUBE2.11.4)管理画面:商品管理の商品マスターで一括で公開・非公開と削除できるようにする。)

jQueryの1.9で同じものが動かないことがありました。

今回、同じ実装をすることがあったので

原因を調べてみました。

スポンサードリンク

attrの使用が変わったことが原因

ECCUBEで実装したときのjQueryのバージョンは1.4.2

動かなかった時のjQueryは1.9.1でした。

こちらの記事に原因が載っていました。
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。

jQuery1.6でattrの使用が変わったことが原因みたいです。

でも、jQuery1.6.1ではattrの使用を元に戻したみたいですが、

またattrの使用を1.6のようにしたことが原因なのでしょう。

どうも、1.9から使用を元に戻したようです。

実装の仕方

こちらを参考にさせていただきました。
jQueryでチェックボックスの全チェック/外しをしようとしてハマッたこと、attr()とprop()の違いは罠レベル

同じような悩みで、とても参考になりました。

propを使って実装してみました。

チェックの文字を押すとチェックが付いてもう一度押すとチェックが外れうタイプ

デモ

HTML

<div id="all_check">チェック</div>
<input type="checkbox" name="check" value="1" >赤
<input type="checkbox" name="check" value="2" >青
<input type="checkbox" name="check" value="3" >緑
<input type="checkbox" name="check" value="4" >黄
<input type="checkbox" name="check" value="5" >紫

jQuery

$(function () {
  $('#all_check').click(function(){
    if($("input:checkbox[name='check']").prop('checked') == false){
      $("input:checkbox[name='check']").prop({'checked':true});
    }else{
      $("input:checkbox[name='check']").prop({'checked':false});
    }
  });
});

【全てチェック】の文字を押すとチェックが付いて【全て外す】の文字を押すとチェックが外れるタイプ

デモ2

HTML

<div id="all_check">全てチェック</div>
<div id="all_clear">全て外す</div>
<input type="checkbox" name="check" value="1" >赤
<input type="checkbox" name="check" value="2" >青
<input type="checkbox" name="check" value="3" >緑
<input type="checkbox" name="check" value="4" >黄
<input type="checkbox" name="check" value="5" >紫

jQuery

$(function () {
	$('#all_check').click(function(){
		$("input:checkbox[name='check']").prop({'checked':true});
	});
	$('#all_clear').click(function(){
		$("input:checkbox[name='check']").prop({'checked':false});
	});
});

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ