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

2018年3月26日

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

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

似たような処理に、クリックしたらイベント処理を行うものがあり、チェックボックスもクリックだろうと思ってやったら、失敗しました。
この場合は、「変更」[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タグの値の状態を確認・設定するタグで、この場合チェックＯＮの時 true、チェックＯＦＦの時はfalseが発生します。

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