复选框控制无线电选中/未选中

我有一个结帐页面，其中两个单选按钮用于“注册帐户”和“访客帐户”结帐方式。复选框控制无线电选中/未选中

我想一个复选框，当检查，将检查注册帐户单选按钮，当未选中它，它会检查来宾帐户结账单选按钮。

这是到目前为止我的代码： 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); 
});

我得到的功能下降的一部分，但我不知道该怎么取消选中复选框时取消选中单选按钮。

来源

2015-07-20 Andrea Rose

在那一刻，我真的没有自己的时间挖掘任何东西，但一种选择是隐藏第三个单选按钮并将其用作默认值。一个Macgyver解决方案的位，但它应该很容易解决问题。 – kirkpatt

你可以这样说：

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>

来源

2015-07-20 17:38:06 j08691

只需添加一个触发变量和检查属性链接到它 http://jsfiddle.net/hQbpZ/163/

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

来源

2015-07-20 17:41:31 DasBeasto

这是不可能的手动取消选中单选按钮，仅仅是因为它们并不意味着以这种方式使用（read more）。单选按钮取消选中的唯一方法是创建多个单选按钮，共享相同的name标签，这意味着您的HTML已经正确。

您的JavaScript确实需要一些更改。没有必要将一个函数绑定两次到同一个事件，所以你可以将它减少到一个绑定。这里面根据您检查两个单选按钮中的一个，像这样结合你检查点击复选框现在是否开启或关闭，并且：

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

来源

2015-07-20 17:45:25 FWDekker

复选框控制无线电选中/未选中

回答

相关问题