Webシステム開発はお任せください

↑Topへ

ブログ記事

jqueryでチェックボックスをラジオボタンのように振る舞う方法(2015/04/07)

jqueryでチェックボックスをラジオボタンのように振る舞う方法

つい先日、jqueryの複数のバージョン使用していたwebアプリを整理していたところ、実装済の「チェックボックスをラジオボタンのように振る舞う処理」が誤動作するようになったため修正しました。その内容を掲載しておきます。
 
         $("input[id^='ALART_CHKBOX_']").on("click",function () {
             var flag = $(this).prop('checked');
             var reChecked = $(this).attr('checked'); //チェックされているチェックボックスを再度クリックした結果'undefined'が格納
             $("input[id^='ALART_CHKBOX_']").attr('checked', false);
             if (flag || typeof reChecked === "undefined") {
                 $(this).prop('checked', true);
             }
);
※checkboxやradioのチェック状態を調べる際にはattrではなpropを使うのが良いとの記事を見かけ、調べたところ それぞれの実行結果の違いがあることがわかりました。 普通にチェックされている以外の項目を選択した場合はいいのですが、既にチェックされている項目を再度チェックするとflag=falseになり、reChecked=undefinedになります。 flgだけで判断するとチェックが外れてしまうことになりますので注意してください。
  チェックした時 チェックを外したとき
prop true false
attr checked undefined

<サンプル>

アラーム