【何気に便利！】jsでページ読み込み時にチェックボックスをデフォルトでチェックしておく機能を実装
Web2016年10月13日
ページ読み込み時にチェックボックスにデフォルトでチェックを入れておくケースがありますが、システムでソースが生成されていて直接ソースを編集することができない場合、jsで対応することが可能です。先日業務で実装が必要なシーンがあったので書き留めておきたいと思います。
サンプルコード
js
(function () {
$(function() {
$('任意のセレクタ input[type="checkbox"]').prop("checked",true);
});
})(jQuery);- ※jQueryを読み込んでいる場合のスクリプトとなります
解説
type属性が[checkbox]となっている要素に対し、propでcheckedをtrueにしています。
属性をコントロールするだけなので一見attr("checked",true);とかでもできそうですが、propはjsにおける属性を取得できるのに対し、attrはhtmlの属性を取得します。
今回取得するのはjsにおける属性であるcheckedなので、propを使用します。attrで動くブラウザもありますが、propだと挙動が安定しますのでオススメです。
ちなみに、直接該当のhtmlソースを改修できる場合は以下のようにchecked="checked"としておけばOKです。
<input type="checkbox" checked="checked" value="" name="">まとめ
ECサイトや会員サイトなどで、メールニュースの購読チェックをデフォルトでチェック済みにしておきたい場合などに使えます。
バックエンドがどのように構築されているかにもよりますが、気軽に該当のソースコードを編集できない場合は、ご紹介した方法のようにjsでコントロールするしかありません。
もし必要なケースがございましたらご活用いただければ幸いです。