javascript - JQuery 根据另一个表单输入更新输入值

Question

我的表单上有以下字段，并且想知道是否可以根据单选按钮中的用户选择来更新隐藏输入字段 (itemValue) 值？这样隐藏字段的输入值将等于所选单选按钮的值...任何示例都受到高度赞赏。谢谢

 <form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
  <div>
    <fieldset>
      <input id="name" type="text" required placeholder="Client Name">
      ...
      ...
      <input type="hidden" name="itemValue" value="">
      ...
      <div>
      <div>
        <label class="label_radio" for="item1">
          <span class="labelText">$5</span>
          <input type="radio" id="item1" name="item1" value="5"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item2">
          <span class="labelText">$10</span>
          <input type="radio" id="item2" name="item2" value="10"/>
        </label>
      </div>          
      <div>
        <label class="label_radio" for="item3">
          <span class="labelText">$15</span>
          <input type="radio" id="item3" name="item3" value="15"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item4">
          <span class="labelText">$20</span>
          <input type="radio" id="item4" name="item4" value="20"/>
        </label>
      </div>
  </div>
  ....
  ....
  </div>

 </form>

Answer 1

您的单选按钮目前都是相互独立的，这意味着您可以同时选择所有 4 个单选按钮。为了让它们协同工作(这样您在任何给定时间只能选择一个)，您需要为它们指定一个相同的名称。例如:

<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/> 

请注意，它们的名称都是“item”？

完成后，您可以像这样使用 jQuery:

$('[name="item"]').on('change', function() {
    $('[name="itemValue"]').val($(this).val());
});

JSFiddle demo 。 (请注意，我使用了文本 input 元素而不是隐藏元素来轻松地向您显示值的变化。)