單選按鈕更新之前的jQuery更新之前的輸入值

Question

我在包含帶有產品信息的表單的頁面上有多個產品。

產品輸入的默認值是產品的名稱，最後附加了默認的CD。如果用戶選擇「數字下載」，則需要更新產品的價值，並將「-CD」交換爲「 - Digital」。

我已經做了一個粗略的jsfiddle，稍微變化一下以顯示隱藏的輸入。您會注意到，兩個輸入都應該是所選產品內的輸入。

http://jsfiddle.net/4ffh9bss/

喝彩！

<div class="product"> 
    <form action="" method="post"> 
     <input class="product-input" name="product" type="hidden" value="Cool music vol 1 - CD" /> 
     <label>Select format</label> 
     <input type="radio" name="type" value="CD" checked="checked">CD 
     <input type="radio" name="type" value="Digital">Digital Download<br/> 
     <input type="submit" class="product-buy" value="Buy now!" /> 
    </form> 
</div> 

<div class="product"> 
    <form action="" method="post"> 
     <input class="product-input" name="product" type="hidden" value="Cool music vol 2 - CD" /> 
     <label>Select format</label> 
     <input type="radio" name="type" value="CD" checked="checked">CD 
     <input type="radio" name="type" value="Digital">Digital Download<br/> 
     <input type="submit" class="product-buy" value="Buy now!" /> 
    </form> 
</div> 


$(".product").each(function() { 
    $('input:radio').bind("change",updateFormat); 

     function updateFormat(e){ 
      e.preventDefault();      
      var $productValue = $('.product-input').val(); 
      var $productValueSplit = $productValue.split('-')[0]; 
      var $radioValue = $("form input[type='radio']:checked").val(); 

      console.log($productValueSplit + ' - ' + $radioValue); 
     } 
}); 

Answer 1

我不喜歡太多你組織你的HTML的方式。這讓我做些簡單的事情來得到你想要的東西，但這取決於你。我能達到你想要與此代碼是什麼：

$('input:radio').each(function(){ 
    $(this).on("click", function(){ 
     var ind = $(this).closest(".product").index(); 
     var $productValue = $('.product-input').eq(ind).val(); 
     var $productValueSplit = $productValue.split('-')[0]; 
     var $radioValue = $("form").eq(ind).find('input:checked').val(); 
     $('.product-input').eq(ind).val($productValueSplit + ' - ' + $radioValue); 
    }); 
}); 

FIDDLE：http://jsfiddle.net/4ffh9bss/4/