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

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

wordpress 5.4.1

実現したいこと

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

やったこと

HTML
1<label for="check1">チェック1
2<input type="checkbox" id="check1" class="checkbox">
3</label>
4<label for="check2">チェック2
5<input type="checkbox" id="check2" class="checkbox">
6</label>
7<label for="check3">チェック3
8<input type="checkbox" id="check3" class="checkbox">
9</label>

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

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

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

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

m.ts10806

2020/04/23 02:31

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

yuuusuke

2020/04/23 02:53 編集

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

m.ts10806

2020/04/23 03:03

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

投稿2020/04/23 02:32