ラジオボタンが自動的に選択されないようにする方法。

Question

2つのラジオボタンがあります。任意のラジオボタンを選択すると自動的に選択解除されます。

以下は正しく動作しないスニペットです。

$('.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>