回答編集履歴

2 別にpropをつかわなくてもよかった箇所を修正

ku__ra__ge

ku__ra__ge score 1773

2017/04/12 18:21  投稿

直前のチェック状態を保持しておいて、ラジオボタンのクリック時には「直前のチェック状態がチェック済み」であればチェック解除をを行うようにしてはどうでしょうか?
```html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function savePreChecked(name) {
   var selector = "input:radio";
   if (name) { selector += "[name='" + name + "']"; }
   $(selector).each(function(){ $(this).prop("preChecked", $(this).prop("checked")); });
   $(selector).each(function(){ this.preChecked = this.checked; });
}
$(function() {
   savePreChecked();
   $("input:radio").on("click", function() {
       if ($(this).prop("preChecked") == true) {
           $(this).prop('checked', false);
       if (this.preChecked == true) {
           this.checked = false;
       }
       savePreChecked(this.name);
   });
});
</script>
</head>
<body>
<div id="group1">
   <input type="radio" name="rdoGroup1">
   <input type="radio" name="rdoGroup1">
   <input type="radio" name="rdoGroup1">
</div>
<div id="group2">
   <input type="radio" name="rdoGroup2">
   <input type="radio" name="rdoGroup2">
   <input type="radio" name="rdoGroup2">
</div>
<div id="group3">
   <input type="radio" name="rdoGroup3">
   <input type="radio" name="rdoGroup3">
   <input type="radio" name="rdoGroup3">
</div>
</body>
</html>
```
1 重くなるという懸念に対応

ku__ra__ge

ku__ra__ge score 1773

2017/04/12 18:14  投稿

直前のチェック状態を保持しておいて、ラジオボタンのクリック時には「直前のチェック状態がチェック済み」であればチェック解除をを行うようにしてはどうでしょうか?
```html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function savePreChecked() {
   $("input:radio").each(function(){ $(this).prop("preChecked", $(this).prop("checked")); });
function savePreChecked(name) {
   var selector = "input:radio";
   if (name) { selector += "[name='" + name + "']"; }
   $(selector).each(function(){ $(this).prop("preChecked", $(this).prop("checked")); });
}
$(function() {
   savePreChecked();
   $("input:radio").on("click", function() {
       if ($(this).prop("preChecked") == true) {
           $(this).prop('checked', false);
       }
       savePreChecked();
       savePreChecked(this.name);
   });
});
</script>
</head>
<body>
<div id="group1">
   <input type="radio" name="rdoGroup1">
   <input type="radio" name="rdoGroup1">
   <input type="radio" name="rdoGroup1">
</div>
<div id="group2">
   <input type="radio" name="rdoGroup2">
   <input type="radio" name="rdoGroup2">
   <input type="radio" name="rdoGroup2">
</div>
<div id="group3">
   <input type="radio" name="rdoGroup3">
   <input type="radio" name="rdoGroup3">
   <input type="radio" name="rdoGroup3">
</div>
</body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る