當使用jQuery檢查單選按鈕時，保存隱藏字段和無線電輸入值的值

Question

我需要將單選按鈕的值收集到數據庫中，但我還需要根據所選單選按鈕收集另一個值。這些值很少會改變，因此擁有前端解決方案似乎是一種方法。下面的代碼可以正常工作，但是我覺得jQuery的功能可以很好的結合起來並且乾得很乾淨。有沒有一種方法可以將四種功能組合到一個功能中？

我的表單數據

... 
<%= f.radio_button :plaque_size, '16" x 8"' %> 16" x 8"/$1,800 Donation 
<%= f.radio_button :plaque_size, '12" x 8"' %> 12" x 8"/$1,500 Donation 
<%= f.radio_button :plaque_size, '8" x 8"' %> 8" x 8"/$1,200 Donation 

<%= f.text_field :plaque_cost, class: 'hidden' %> 
... 

jQuery的

$(function() { 
    $('#plaqueorder_plaque_size_16_x_8').change(plaque_size_16_x_8); 
    $('#plaqueorder_plaque_size_12_x_8').change(plaque_size_12_x_8); 
    $('#plaqueorder_plaque_size_8_x_8').change(plaque_size_8_x_8) 
}); 

function plaque_size_16_x_8() { 
    $('#plaque_cost').val('180000'); 
} 
function plaque_size_12_x_8() { 
    $('#plaque_cost').val('120000'); 
} 
function plaque_size_8_x_8() { 
    $('#plaque_cost').val('95000'); 
} 

Answer 1

我會用兩個進球第一modifiy你的HTML ...

1. 設置每個單選按鈕，讓您獲得您的jQuery代碼對應的捐贈量的領域。您可以設置value屬性或data-donation屬性等。

2. 設置一種方法來在jQuery中輕鬆選擇所有單選按鈕。例如，一個類。

我現在沒有軌道，但我想它一定很容易做到。這個想法是，HTML結果類似於此...

<input type="radio" class="rbdonation" value="180000"... 
<input type="radio" class="rbdonation" value="120000"... 
<input type="radio" class="rbdonation" value="95000"... 

然後，你可以做你在一個jQuery的事件函數想要什麼......

$('input.rbdonation').change(function() { 
    $('#plaque_cost').val(this.value); 
}); 

或者，如果你需要的value用於其他用途領域，你可以使用data-*屬性...

HTML：

<input type="radio" class="rbdonation" data-donation="180000"... 
<input type="radio" class="rbdonation" data-donation="120000"... 
<input type="radio" class="rbdonation" data-donation="95000"... 

JQUERY：

$('input.rbdonation').change(function() { 
    $('#plaque_cost').val($(this).data('donation')); 
}); 

Answer 2

爲什麼不只是做一個plaque_size功能，並傳遞價值，你想，而不是轉換？你會HABE只是一個功能，如果你這樣做：

function plaque_size (size) { 
    $('#plaque_cost').val (size); 
} 

，並調用它像這樣：

$（ '＃plaqueorder_plaque_size_16_x_8'）變化（plaque_size（ '180000'））;