チェックボックス 一択選択 ＆ 選択解除

Question

チェックボックスの一択選択とその解除　JQuery

wordpress 5.4.1

実現したいこと

表題の通りなのですが、チェックボックスを一択選択にすることと、そのチェックを外す方法です。

やったこと

<label for="check1">チェック1
<input type="checkbox" id="check1" class="checkbox">
</label>
<label for="check2">チェック2
<input type="checkbox" id="check2" class="checkbox">
</label>
<label for="check3">チェック3
<input type="checkbox" id="check3" class="checkbox">
</label>

jQuery(".checkbox").on("click", function(){
 jQuery('.checkbox').prop('checked', false);  //  全部のチェックを外す
   jQuery(this).prop('checked', true);  //  押したやつだけチェックつける
});

上記のように記述したのですが、これだとチェックしたものを再度クリックしても解除ができません。
（コードがそうなので当たり前なのですが。）
理想としては、チェックのイン・アウトをクリックで可能とし、全てチェック無しという状態も含めたいのです。

色々とためしたのですが、どうもうまくできません。

何卒ご教授頂けると幸いです。

Comments

[m.ts10806]

「一括」ではなく「一択」ですか？

[yuuusuke]

はい、すみません。
一括　ではなく　一択でした。

[m.ts10806]

質問は編集できますので。

Answer 1

このような形でいかがでしょうか?

jQuery(".checkbox").on("click", function(){
  if (jQuery(this).prop('checked') == true) {
    jQuery('.checkbox').prop('checked', false);  //  全部のチェックを外す
    jQuery(this).prop('checked', true);  //  押したやつだけチェックつける
  }
});

Comments

[yuuusuke]

new1ro様

ご回答ありがとうございます！

試したところ、すんなり理想としていることが実現できました！
ifで、チェックを入れれるようにする？のですね。

ありがとうございました。