【jQuery】チェックボックスのOn/Offを切り替える

こんにちは！

今回はjQueryでチェックボックスのON/OFFを制御する方法です。

attrじゃなくてpropを使おう

propを使用すると ON/OFF の操作が可能となります。

$('#checkbox').prop('checked', true);     // ON
$('#checkbox').prop('checked', false);    // OFF

注意点としては、attrではなくpropを使用すること。

attr：単純に指定したタグの属性値を取得する。
例）checkedを指定した場合、checked属性がない場合は undefined が返る。

prop：指定した属性の有無と値を判断した結果を取得する。
例）checkedを指定した場合、checked属性がない場合は false が返る。
checked、disabled、readonlyは同じ動作

最後に

もともと昔（ver1.6より前）は prop がなかったんで 属性の操作は attr を使っていたのですが、ver1.6で prop ができたため attr と prop とで分業が進んだ感じです。 ブラウザのバージョンアップなんかで予想外の動作を引き起こさないためにも正しい関数を覚えていきましょう！