Question

如何通过仅点击其中一个单选按钮来切换两个单选按钮的已检查状态？

请看下面的示例。

.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

在此设置中需要克服的问题是每个单选按钮在浏览器中都有默认的true / false行为，甚至在任何jQuery / javascript事件侦听器触发之前都会触发。

解决此问题的方法是向前和向后切换class，然后仅通过引用class来更新单选按钮的状态。

这是使用jQuery和本机javascript的直接方法：

<强> 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：

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

试试这个：删除“pointer-events：none;”

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

JQuery：通过单击其中一个来切换两个单选按钮

2 个答案: