みかづきブログ その3

3ヶ月つづけてみました。

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

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

kimizuka.hatenablog.com

<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に残り続けるので注意が必要です。

kimizuka.hatenablog.com


jQuery

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

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




ツイッターやってます!