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

我首先要修改您的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函數並傳遞您想要的值，而不是轉換呢？ 如果執行以下操作，您將只擁有一個功能：

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

並這樣稱呼它：

$（'＃plaqueorder_plaque_size_16_x_8'）。change（plaque_size（'180000'））;