JQuery：2つのラジオボタンを1つだけクリックして切り替えます

Question

2つのラジオボタンのうち、どれか1つだけをクリックしてチェックした状態を切り替えるにはどうすればよいですか？

下記の例をご覧ください。

.option{ 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none;  
 
    -ms-user-select: none;  
 
    user-select: none;  
 
} 
 

 
.option-checkbox-1{ 
 
    opacity: 0.7; 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="option option-checkbox-1"> 
 
<input type="radio" id="radio1" name="group[1]" value="1" checked="checked"> 
 
Radio 1 
 
</label> 
 
<label class="option option-checkbox-2"> 
 
<input type="radio" id="radio2" name="group[1]" value="2"> 
 
Radio 2 
 
</label>

Answer 1

このセットアップで克服すべき問題は、各ラジオボタンにも任意のjQueryの/ JavaScriptのイベントリスナが起動する前に発射し、ブラウザのデフォルトの真/偽の挙動を有することです。

これを回避する方法は、classを前後に切り替えて、classを参照するだけでラジオボタンの状態を更新することです。

のjQuery：

$(document).ready(function(){ 
 
    $('input[type="radio"]').click(function(){ 
 
     $('input[type="radio"]').each(function(){ 
 
      $(this).toggleClass('checked'); 
 
      $(this).hasClass('checked') ? $(this).prop('checked', true) : $(this).prop('checked', false); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
<input type="radio" class="checked" checked /> Radio A 
 
<input type="radio" /> Radio B 
 
</form>

---

Javascriptを：

はここでjQueryとネイティブJavaScriptを使用して、この単純なアプローチをだ

var radioButtons = document.querySelectorAll('input[type="radio"]'); 
 

 
function toggleCheck() { 
 
    radioButtons.forEach(function(radioButton){ 
 
     radioButton.classList.toggle('checked'); 
 
     radioButton.classList.contains('checked') ? radioButton.checked = true : radioButton.checked = false; 
 
    }); 
 
} 
 

 
radioButtons.forEach(function(radioButton){ 
 
    radioButton.addEventListener('click',toggleCheck,false); 
 
});

<form> 
 
<input type="radio" class="checked" checked /> Radio A 
 
<input type="radio" /> Radio B 
 
</form>

Answer 2

これを試してみてください：削除 "ポインタイベント：なし;"

.option-checkbox-1{ 
    opacity: 0.7; 
}