基於另一個表單輸入的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個在同一時間。爲了讓他們一起工作（所以你只能選擇一個在任何時間），你需要給他們所有相同的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

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

Answer 3

<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>

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

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

}）;

Answer 4

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