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

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

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

目的

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が付いていれば、外すし、ついてなければつけるし
って処理をしてます。

施策の問題点

施策１でダメだったのが、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でチェックボックスが正しく操作できない