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个单选按钮。为了让它们一起工作（所以你只能在任何给定的时间选择一个），你需要给它们一个相同的name。例如：

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

注意这两者都有name的“项目”？

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

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

JSFiddle demo。（请注意，我使用了文本input元素而非隐藏元素，以便轻松向您显示值的变化。）

Answer 2

<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="item" value="5"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item2">
          <span class="labelText">$10</span>
          <input type="radio" id="item2" name="item" value="10"/>
        </label>
      </div>          
      <div>
        <label class="label_radio" for="item3">
          <span class="labelText">$15</span>
          <input type="radio" id="item3" name="item" value="15"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item4">
          <span class="labelText">$20</span>
          <input type="radio" id="item4" name="item" value="20"/>
        </label>
      </div>
  </div>
  ....
  ....
  </div>

 </form>

JQuery的＆GT;

$(function(){ 
    $("input[name='item']").change(function(){

        $("input[name='itemValue']").val($(this).val());
        alert($("input[name='itemValue']").val());
    });

}）;

Answer 3

        $('input:radio').change(function () {
            if (this.checked) {
               $('#hidfld').val($(this).val()));
            }
        });

Answer 4

$("input[type=radio]").change(function () {
    if ($(this).prop(":checked")) {
        $('#yourId').val($(this).val())
    }
});

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

4 个答案: