Jqueryに関するブログ記事（Blog）

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