復選框控制選中/未選中的無線電

Question

我有一個帶有兩個單選按鈕的結帳頁面，其中一個用於“注冊帳戶”和“訪客帳戶”結帳方法。

我想要一個復選框，當它被選中時，它會選中“ 注冊帳戶”單選按鈕，而當它未被選中時，它會選中“ 來賓帳戶”結單按鈕。

到目前為止，這是我的代碼： 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);  
});  

我沒有使用該功能的一部分，但是當取消選中復選框時，我不知道如何取消選中單選按鈕。

Answer 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> 

Answer 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);  
});        

Answer 3

手動取消選中單選按鈕是不可能的，僅因為單選按鈕並不是要那樣使用（ 了解更多信息 ）。 取消選中單選按鈕的唯一方法是創建多個共享相同name標簽的單選按鈕，這意味着您的HTML已經正確。

您的JavaScript確實需要一些更改。 不必將一個函數綁定到同一事件兩次，因此可以將其簡化為一個綁定。 在該綁定內，您檢查單擊的復選框現在是打開還是關閉，並根據此選擇檢查兩個單選按鈕之一，如下所示：

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