jQueryでのinputのcheckboxのステータスの確認と変更を行う

Tweet

238

jQueryを使ったinput要素でtypeがcheckboxでそのチェックボックスがチェックされているのか、されていないのかを確認する方法と,チェックの状態を変更する方法です。他の要素からcheckboxの値を操作も行えて例えば、全てのチェックボックスをチェックするなどの動作の実装などに利用出来る。

jQueryでinputのcheckboxの状況を取得・変更する

var checkbox_prop = $(#form-x input[type=checkbox]).prop("checked");

jQueryでcheckboxの状況を取得する場合は、返り値がtrueなのかfalseなのかがえってきます。チェックが付いている場合は true となり チェックがついていないものは false となる。

使い道はtrue か false かを if を使って 条件分岐し処理を振り分ける

if で checked なのかどうかで処理を分岐する

var checkbox_prop = $(#form-x input[type=checkbox]).prop("checked");

if(checkbox_prop) {
  //trueの場合の処理をここに
} else {
  //trueではなかった場合の処理をここに
}

checkboxの値を変更する

//チェックを有効にしている
$(#form-x input[type=checkbox]).prop("checked",true);

//チェックを無効にしている
$(#form-x input[type=checkbox]).prop("checked",false);

checkboxの値を変更するときは、propの値に続いて true か false を指定する事でチェックボックスの状況を変更する事が出来る。

Tweet

短縮URL:

2015年05月08日 WEB制作系 コード・プラグイン jQueryprop()