複選框控制無線電選中/未選中

我有一個結帳頁面，其中兩個單選按鈕用於「註冊帳戶」和「訪客帳戶」結帳方式。複選框控制無線電選中/未選中

我想一個複選框，當檢查，將檢查註冊帳戶單選按鈕，當未選中它，它會檢查來賓帳戶結賬單選按鈕。

這是到目前爲止我的代碼： 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

複選框控制無線電選中/未選中

回答

相關問題