Jquery でチェックボックスの値から処理を分岐させる方法

先日、フォームのチェックボックス(input type=checkbox)がチェックONと、チェックOFFを判断し、処理を行う事例があり、少しはまったので忘備録として残します。

チェック=クリックと思って、クリックで処理したら失敗

似たような処理に、クリックしたらイベント処理を行うものがあり、チェックボックスもクリックだろうと思ってやったら、失敗しました。
この場合は、「変更」[change]として処理すればよいようです。

■ソース

<p id=”disp”>表示部分</p>
<input name=”name_chk” type=”checkbox” id=”id_chk” value=”チェックした”>チェックボックスの場合

■Jquery

$(document).ready(function()
{
$(“#id_chk”).change(function()
{
if ($(“[name=name_chk]”).prop(“checked”) == true)
{$(“#disp”).text(“チェックボックス check on”);}
else
{$(“#disp”).text(“チェックボックス check off”);}
});
});

チェックボックスを選択・非選択のタイミングで、クリックでも動作はするのですが、この場合は「変更」として、changeを使うのが良いようです。

また、propは、inputタグの値の状態を確認・設定するタグで、この場合チェックONの時 true、チェックOFFの時はfalseが発生します。

チェックボックスや、ラジオボタンは、項目が複数になることが前提のため、選択されている値を取得するというものもございますが、それはまた別の機会に。

 

今回のレポートは以上です。
読んでいただいてありがとうございました。


Twitterでもweb集客向上、webマーケティング等についてブログの内容以外の情報発信もさせていただいております。Twitterもご覧いただければ幸いです。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。
微力ではございますが、鋭意ご対応申し上げます。

ホームページのご提案もさせていただいております