Ashley Ashley - 7 months ago 87
Javascript Question

jquery change selected radio button on input change

At the checkout the customer can either choose to pay a set deposit, the full amount or a value between the set deposit and full amount.

The radio button is selected on the set deposit as default, if they decide to pay a specific amount the corresponding radio button is selected instead.

Its harder to explain than it is so show.

<div class="grey_header" style="margin:20px 10px 0px 10px; width:80%; padding:10px; background-color:#efefef; text-align:center"><strong>Order Payment Options</strong></div>
<div style="margin:0px 10px; padding:10px; width:80%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50" height="70" align="center"><label>
<input name="pay_amount" type="radio" id="radio" value="deposit" checked="checked" />
</label></td>
<td><font class="grey_header">Pay initial deposit</font><br />
This option will pay the initial deposit required before we can process this order.</td>
<td align="center"><b><font class="current_price">&pound;345.00</font></b>
<input type=hidden name="order_deposit" value="345"></td>
</tr>
<tr>
<td width="50" height="70" align="center"><label>
<input name="pay_amount" type="radio" id="radio" value="full" />
</label></td>
<td><font class="grey_header">Pay full balance</font><br />
This option will pay off the full balance of this order.</td>
<td width="150" align="center"><b><font class="current_price">&pound;1,724.00</font></b><br />

<input type=hidden name="order_deposit" value="1724"></td>
</tr>
<tr>
<td width="50" height="70" align="center"><label>
<input type="radio" name="pay_amount" id="pay_other" value="other" />
</label></td>
<td><font class="grey_header">Pay different amount</font><br />
This option will allow you to pay a specific amount between &pound;346.00 and &pound;1,724.00.</td>
<td align="center"><b><font class="current_price">&pound;
<input name="order_deposit" type="text" class="current_price" id="order_deposit" value="862.00" autocomplete="off" size="6" />
</font></b></td>
</tr>
</table>
</div>


Ive created a fiddle - https://jsfiddle.net/ashpb/hfLn2jcs/

If the customer clicks on the input field with 862.00 in it, the bottom radio button is selected instead of the default top one.

Answer

you can add jquery script, to change the radio button on input change. use .focus() or .focusin() method for this:

$(document).ready(function(){
    $('#order_deposit').focusin(function(){
         $('#pay_other').attr('checked', 'checked');
    });
});

and if user left it blank and leave the input box, then you can reset the default radio button like this:

 $('#order_deposit').focusout(function(){
       if($('#order_deposit').val()==''){            
            $('#radio').attr('checked', 'checked');
         }
    });