アイキャッチ - check

jQuery – labelで作られたcheckboxをjsでcheckedを付けようとしたら、cssが反映されない件

#jQuery
written by GOATしゃっちょ

こんばんわ。
しゃっちょです。
寒くなりましたね。最近バタバタしていて全然お酒呑めてないです。
お酒弱くなっちゃう。

さて今回はjQueryのチェックボックスについてです。

目的

jquery - table

viewでこんな感じの動的なtableを作りたい。

1番左側はcheckboxになっており、labelとinput type = checkbox で作ってます。(checkboxのデザインを変えるため)

今回は、labelがクリックされたらinputにcheckedを付け外ししたい!という目的になります。

施策

function chk_click(id){ 
 if($('#id').prop('checked')){ // checkedが付いてるか判定
  $(this).attr('checked','checked'); // 付ける
 } else {
  $(this).removeAttr('checked'); // 外す    
 } 
}

最初に行ったのがこちら。
htmlにonclick付けて、トリガーにしてます。
function内では、持ってきたidからpropでif判定してます。
checkedが付いていれば、外すし、ついてなければつけるし
って処理をしてます。

施策の問題点

施策1でダメだったのが、chromeブラウザの検証でElementsを見るとちゃんとcheckedの付け外し自体はできてるんですが、

見た目がチェックされてない!!

という状態に。HTMLではcheckedは付いてるのに何故・・・?

改善策

function chk_click(id){ 
if($('#id').prop('checked')){ // checkedが付いてるか判定
  $(this).prop('checked',true); // 付ける
 } else { 
  $(this).prop('checked',false); // 外す
 } 
}

こうするとうまいこといきました。
施策1ではattrとremoveAttrで付け外ししてましたが、propでやる。
原因はよくわからず、jQueryのバグ・・・?っぽいかんじが調べてて感じたこと。

 

注意点

実は今回起きた事象は、th部分にある、全選択のチェックボックスでの出来事。

テーブル各行では発生しなかったんです。attrで上手くいってた。

けど、全選択をクリックして、他のチェックボックスもcheckedを付ける

って時に発生した事象になります。だいぶムラがありますね。jsは奥が深い。(動作が不安定なのかもだけど)

参考サイト

・NER experiment room – jQueryでチェックボックスが正しく操作できない