我需要将单选按钮的值收集到数据库中，但我还需要根据选择的单选按钮收集另一个值。这些值很少会改变，因此拥有前端解决方案似乎是可行的方法。下面的代码可以正常工作，但我觉得 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');
}
我会首先用两个目标修改你的 html ......
为每个单选按钮设置一个字段，允许您在 jQuery 代码中获取相应的捐赠金额。您可以设置一个value属性，或一个data-donation属性等。
设置一种在 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"...
查询：
$('input.rbdonation').change(function() {
$('#plaque_cost').val($(this).data('donation'));
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句