以前はフォームの操作をさわりだけ体験しました が、今回はチェックボックスの操作に特化します。
<input type="checkbox" id="checkbox" />
という要素があるとしてもろもろ操作してみましょう。
選択したチェックボックスにチェックを入れる
JavaScript
おさらいになりますが、チェックをいれたいインプットタグのcheckedをtrueにします。
document.getElementById("checkbox").checked = true;
jQuery
.prop をつかって checked の値を true にします。
$("#checkbox").prop("checked", true);
選択したチェックボックスのチェックをはずす
JavaScript
チェックをはずしたいインプットタグのcheckedをfalseにします。
document.getElementById("checkbox").checked = false;
jQuery
.prop をつかって checked の値を false にします。
$("#checkbox").prop("checked", false);
選択したチェックボックスにチェックが入っているか確認する
JavaScript
checked の値を確認します。
if (document.getElementById("checkbox").checked) { // チェックがはいっている } else { // チェックがはいっていない }
jQuery
.prop をつかって checked の値を確認します。
if ($("#checkbox").prop("checked")) { // チェックがはいっている } else { // チェックがはいっていない }
チェックがはいったチェックボックスをセレクトする
JavaScript
擬似クラス :checked をつかえばらくらくです。
var checked = document.querySelectorAll(":checked");
http://caniuse.com/#search=%3Achecked
ただし querySelectorAllで取得したDOMは自動的に更新されない ので、取得後にチェックを外したとしても checkedに残り続けるので注意が必要です。
jQuery
やはり擬似クラス :checked をつかえばOKです。
var $checked = $(":checked");
HTMLとCSSでトグルボタンUIをつくりました。https://t.co/OaSaSxOBJm
— 君塚史高 (@ki_230) 2017年4月27日
ツイッターやってます!