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

Question

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

以下是无法正常使用的代码段。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的主要问题是“return 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>

Answer 2

删除return false;行，您的代码就可以了。它正在取消选择，因为您正在阻止单选按钮的默认操作

Answer 3

只需删除阻止选择的return false;

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;