复选框控制Radio Checked/Unchecked

Checkboxes control Radio Checked/Unchecked

本文关键字：Unchecked Checked Radio 控制 复选框      更新时间：2023-09-26

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

我想要一个单一的复选框，当它被选中时，它检查注册帐户单选按钮，当它没有被选中时，它检查来宾帐户结帐单选按钮。

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

我已经完成了部分功能，但是我不知道当复选框未选中时如何取消选中单选按钮

你可以这样做:

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>

只需添加一个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);  
});

手动取消选中单选按钮是不可能的，因为它们不应该这样使用(阅读更多)。取消选中单选按钮的唯一方法是创建多个共享相同name标记的单选按钮，这意味着您的HTML已经正确。

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

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