我有一个结帐页面,其中有两个单选按钮,分别用于“注册帐户”和“访客帐户”结帐方式。
我想要一个复选框,当它被选中时,会检查注册帐户单选按钮,当它未选中时,它会检查访客帐户结帐单选按钮
到目前为止,这是我的代码: 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);
});
我的部分功能已关闭,但在取消选中复选框时,我不知道如何取消选中单选按钮。
答案 0 :(得分: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>
答案 1 :(得分:0)
只需添加一个toggle变量并将checked属性链接到它 http://jsfiddle.net/hQbpZ/163/
var registered = false;
jQuery('#checkbox1').click(function(){
registered = !registered
jQuery('#radio1').attr('checked', registered);
jQuery('#radio2').attr('checked', !registered);
});
答案 2 :(得分:0)
手动取消选中单选按钮是不可能的,因为它们不是那种方式( read more )。取消选中单选按钮的唯一方法是创建共享相同name
标记的多个单选按钮,这意味着您的HTML已经正确。
您的JavaScript确实需要进行一些更改。没有必要将函数绑定到同一事件两次,因此您可以将其减少为一个绑定。在该绑定中,您可以检查单击的复选框现在是打开还是关闭,并根据您检查两个单选按钮之一,如下所示:
$('#checkbox1').click(function() {
if($('#checkbox1').prop('checked') === true) {
$('#radio1').attr('checked', true);
} else {
$('#radio2').attr('checked', false);
}
});