checkboxでradioボタンのような動きを実装したい

Question

<ul class="search_modal_box_select_list">
　<li>
　　<label class="" for="hogea">
　　　<input type="checkbox" class="ch me" name="hoge_move[]" value="hogea"><span></span>ほげA      
　　</label>
　</li>
　<li>
　　<label class="" for="hogeb">
　　　<input type="checkbox" class="ch me" name="hoge_move[]" value="hogeb"><span></span>ほげB      
　　</label>
　</li>
　<li>
　　<label class="" for="hogec">
　　　<input type="checkbox" class="ch me" name="hoge_move[]" value="hogec"><span></span>ほげC     
　　</label>
　</li>
</ul>

上記の３つのチェックボックスについて、ラジオボタンのように一つしか選択できないようにしたいと思い
以下のようなjqueryを書きました。

$(".ch.me").on("click", function(){
        $('.ch.me').prop('checked', false); 
        $(this).prop('checked', true);  
  if ($(this).prop('checked')) {//うまく動かない
    $(this).prop('checked', false);
  }
});

問題は４行目からのifです。
現状、他の.ch.meをクリックしないと選択を解除できないので
既にチェックされている.ch.meをもう一度クリックするとチェックが外れるようにif文を書きました。
が、ループに入ってしまったようでうまく動きません。
非常に初歩的な質問かと思いますがどのようにすれば選択を解除できるか、ご助言いただけないでしょうか。

Comments

[m.ts10806]

PHP関係ないのでは

[m.ts10806]

ただ、チェックボックスのメリットないので、ラジオボタンで良いのでは。

[xminimx]

phpは関係なかったですね、失礼しました。該当部を記述しているファイルがphpだったのでタグに入れていました。
最初ラジオボタンで実装しようとしたのですが、別の問題点が発生したのでチェックボックス を使った次第です。

Answer 1

ググったらすぐに結構見つかりますよ。
こちらのページがシンプルでわかりやすいかと思います。
チェックボックスをラジオボタンのような動きにする

Comments

[xminimx]

ありがとうございます、そちらのページにもたどり着いていたのですが一番下まで読んでいませんでした…！
ご提示いただいたページを参考にして実装できました。

Answer 2

ラジオボタンはform単位なのでチェックボタンでやるときも
干渉しないようにグルーピングに注意が必要です

Comments

[yambejp]

<script>
$(function(){
$(':checkbox').on('change',function(){
if($(this).closest('form').length>0){
var ch=$(this).closest('form').find(':checkbox[name='+$(this).attr('name')+']');
}else{
var ch=$(this).closest('body').find(':checkbox[name='+$(this).attr('name')+']').filter(function(){return $(this).closest('form').length==0;});
}
ch.not(this).prop('checked',false);
});
});
</script>

<form>
<label><input type="checkbox" name="a">a1</label>
<label><input type="checkbox" name="a">a2</label>
<label><input type="checkbox" name="a">a3</label><br>
<label><input type="checkbox" name="b">b1</label>
<label><input type="checkbox" name="b">b2</label>
<label><input type="checkbox" name="b">b3</label><br>
</form>

<label><input type="checkbox" name="b">b1</label>
<label><input type="checkbox" name="b">b2</label>
<label><input type="checkbox" name="b">b3</label>