如何避免单选按钮被自动取消选择。

Question

有两个单选按钮。当选择任何单选按钮时会自动取消选择。

以下是无法正常工作的代码片段。

$('.radio_pmt').click(function(){ 
 
alert('click'); \t 
 
var payment_mode =$(this).attr('ownid'); 
 

 
\t var type = typeof payment_mode; 
 
\t if(payment_mode == 'undefined' | payment_mode == null){ 
 
\t \t alert("Please select payment method"); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t if(payment_mode == "paypal") 
 
\t \t { 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').attr('checked', true); 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').val('paypal'); 
 
\t \t \t $("#paypal_form").submit(); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').val('braintree'); 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').attr('checked'); 
 
\t \t \t $("#braintree_details").slideDown("slow"); 
 
\t \t \t 
 
\t \t } 
 
\t } 
 
\t return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="frm_choose_plan" name="frm_choose_plan"> 
 
<label>Choose Payment method:</label> 
 
<input type="radio" class="radio_pmt" ownid="paypal" name="payment_mode" value="Paypal">Paypal 
 
<input type="radio" class="radio_pmt" ownid="braintree" name="payment_mode" value="braintree" id="credit_cardpmt">Credit card 
 
</form>

Answer 1

取出return false;行，你的代码将工作。这是取消选择，因为你正在防止单选按钮

Answer 2

只是删除return false;该块选择

$('.radio_pmt').click(function(){ 
 
alert('click'); \t 
 
var payment_mode =$(this).attr('ownid'); 
 

 
\t var type = typeof payment_mode; 
 
\t if(payment_mode == 'undefined' | payment_mode == null){ 
 
\t \t alert("Please select payment method"); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t if(payment_mode == "paypal") 
 
\t \t { 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').attr('checked', true); 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="paypal"]').val('paypal'); 
 
\t \t \t $("#paypal_form").submit(); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').val('braintree'); 
 
\t \t \t $('input:radio[name="payment_mode"][ownid="braintree"]').attr('checked'); 
 
\t \t \t $("#braintree_details").slideDown("slow"); 
 
\t \t \t 
 
\t \t } 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="frm_choose_plan" name="frm_choose_plan"> 
 
<label>Choose Payment method:</label> 
 
<input type="radio" class="radio_pmt" ownid="paypal" name="payment_mode" value="Paypal">Paypal 
 
<input type="radio" class="radio_pmt" ownid="braintree" name="payment_mode" value="braintree" id="credit_cardpmt">Credit card 
 
</form>

Answer 3

你的主要问题是 “返回false” 防止默认事件。

我的建议

$('.radio_pmt').click(function(){ 
 
    var $input = $(this); 
 
    var inputType = $input.attr('ownid'); 
 
    
 
    if (inputType === 'paypal') { 
 
    // do something if user clicked on paypal 
 
     
 
    // your code 
 
    $("#paypal_form").submit(); 
 
    
 
    $('#test').html('clicked paypal'); // remove this on live page 
 
    } 
 
    else if (inputType === 'braintree') { 
 
    // do something if user clicked on baintree 
 
    $("#braintree_details").slideDown("slow"); 
 
    
 
    $('#test').html('clicked Credit Card'); // remove this on live page 
 
    } 
 
    else { 
 
    // nothing choosed! But i cant be reached because you choose the ".radio_pmt" selector to bind your click event which has both the "ownid" 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="frm_choose_plan" name="frm_choose_plan"> 
 
<label>Choose Payment method:</label> 
 
<input type="radio" class="radio_pmt" ownid="paypal" name="payment_mode" value="Paypal">Paypal 
 
<input type="radio" class="radio_pmt" ownid="braintree" name="payment_mode" value="braintree" id="credit_cardpmt">Credit card 
 
</form> 
 

 
<div id="test"></div>