复选框控制 Radio Checked/Unchecked答案

【问题标题】：Checkboxes control Radio Checked/Unchecked复选框控制 Radio Checked/Unchecked
【发布时间】：2015-07-21 01:45:25
【问题描述】：

我有一个带有两个单选按钮的结帐页面，一个用于“注册帐户”和“访客帐户”结帐方法。

我想要一个复选框，当它被选中时，它会选中 Register Account 单选按钮，当它未被选中时，它会选中 Guest Account 结帐单选按钮.

到目前为止，这是我的代码： http://jsfiddle.net/hQbpZ/160/

HTML：

Remember Me for Future Purposes :<input type="checkbox" id="checkbox1"/> <br/><br/>

Register Account :<input type="radio" id="radio1" name="radio"/><br>
Guest Checkout :<input type="radio" id="radio2" name="radio"/><br>

JS：

jQuery('#checkbox1').click(function(){
    jQuery('#radio1').attr('checked', true);    
});        

jQuery('#checkbox1').click(function(){       
    jQuery('#radio2').attr('checked', false);  
});

我关闭了部分功能，但我不知道如何在取消选中复选框时取消选中单选按钮。

【问题讨论】：

目前，我真的没有时间深入研究任何内容，但一种选择是隐藏第三个单选按钮并将其用作默认值。有点 Macgyver 解决方案，但它应该很容易解决问题。

标签： javascript jquery html checkbox radio-button

【解决方案1】：

你可以这样做：

jQuery('#checkbox1').click(function () {
    jQuery('#radio1').prop('checked', $(this).is(':checked'));
    jQuery('#radio2').prop('checked', !$(this).is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Remember Me for Future Purposes :
<input type="checkbox" id="checkbox1" />
<br/>
<br/>Register Account :
<input type="radio" id="radio1" name="radio" />
<br>Guest Checkout :
<input type="radio" id="radio2" name="radio" />
<br>

【讨论】：

【解决方案2】：

只需添加一个切换变量并将选中的属性链接到它 http://jsfiddle.net/hQbpZ/163/

var registered = false;
jQuery('#checkbox1').click(function(){
     registered = !registered
     jQuery('#radio1').attr('checked', registered); 
     jQuery('#radio2').attr('checked', !registered);  
});

【讨论】：

【解决方案3】：

无法手动取消选中单选按钮，因为它们不适合那样使用 (read more)。取消选中单选按钮的唯一方法是创建多个共享相同 name 标记的单选按钮，这意味着您的 HTML 已经正确。

您的 JavaScript 确实需要一些更改。没有必要将一个函数两次绑定到同一个事件，因此您可以将其减少为一个绑定。在该绑定中，您检查单击的复选框现在是打开还是关闭，并根据它检查两个单选按钮之一，如下所示：

$('#checkbox1').click(function() {
    if($('#checkbox1').prop('checked') === true) {
        $('#radio1').attr('checked', true);
    } else {
        $('#radio2').attr('checked', false);
    }
});

【讨论】：