先日、フォームのチェックボックス(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が発生します。
チェックボックスや、ラジオボタンは、項目が複数になることが前提のため、選択されている値を取得するというものもございますが、それはまた別の機会に。