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>

我创造了一个小提琴 - 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');
         }
    });

jquery在输入更改时更改选定的单选按钮

1 个答案: