JavaScriptの力をつかってチェックボックスを操作する

以前はフォームの操作をさわりだけ体験しましたが、今回はチェックボックスの操作に特化します。

<input type="checkbox" id="checkbox" />

という要素があるとしてもろもろ操作してみましょう。

おさらいになりますが、チェックをいれたいインプットタグのcheckedをtrueにします。

document.getElementById("checkbox").checked = true;

.prop をつかって checked の値を true にします。

$("#checkbox").prop("checked", true);

チェックをはずしたいインプットタグのcheckedをfalseにします。

document.getElementById("checkbox").checked = false;

.prop をつかって checked の値を false にします。

$("#checkbox").prop("checked", false);

checked の値を確認します。

if (document.getElementById("checkbox").checked) {
  // チェックがはいっている
} else {
  // チェックがはいっていない
}

.prop をつかって checked の値を確認します。

if ($("#checkbox").prop("checked")) {
  // チェックがはいっている
} else {
  // チェックがはいっていない
}

擬似クラス :checked をつかえばらくらくです。

var checked = document.querySelectorAll(":checked");

ただし querySelectorAllで取得したDOMは自動的に更新されないので、取得後にチェックを外したとしても checkedに残り続けるので注意が必要です。

やはり擬似クラス :checked をつかえばOKです。

var $checked = $(":checked");

HTMLとCSSでトグルボタンUIをつくりました。https://t.co/OaSaSxOBJm
— 君塚史高 (@ki_230) 2017年4月27日

ツイッターやってます！

みかづきブログその3