jQuery изменение выбранной радиокнопки при изменении ввода

Question

В кассе заказчик может либо выбрать оплатить заданный депозит, полную сумму или стоимость между установленным депозитом и полной суммой.

Радиоуправление выбрано на заданном депозите по умолчанию, если они решили заплатить определенную сумму, вместо этого выбран соответствующий переключатель.

Его труднее объяснить, чем это так показать.

<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 создал скрипку - https://jsfiddle.net/ashpb/hfLn2jcs/

Если пользователь нажимает на поле ввода с 862.00 в нем, нижняя кнопка радио выбран вместо верхней одного по умолчанию.

Answer 1

вы можете добавить скрипт jquery, чтобы изменить переключатель на входе. Метод использование .focus() или .focusin() для этого:

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

и если пользователь оставил его пустым и оставить в поле ввода, то вы можете сбросить кнопку по умолчанию радио, как это:

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