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

jquery
このエントリーをはてなブックマークに追加
PR

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 を指定する事でチェックボックスの状況を変更する事が出来る。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)