在 jQuery 中更改 Wordpress 表单上的单选按钮标签答案

【问题标题】：Changing Radio Button Label on Wordpress form in jQuery在 jQuery 中更改 Wordpress 表单上的单选按钮标签
【发布时间】：2012-11-14 17:25:09
【问题描述】：

我有一个带有单选按钮输入标签和值的 Wordpress 表单，我需要根据另一个字段的输入动态生成该表单。

我无法控制表单的生成方式（没有深入研究插件，时间对我很不利，所以我只需要一个快速的解决方案）

Wordpress 生成的 html 如下

<input type="text" name="vfb-22" id="vfb-4-50-22" value="" class="vfb-text  vfb-medium number" />
<label for="vfb-4-50-22" class="vfb-desc">Number * 4.50:></label>     

<span>
  <input type="radio" name="vfb-28" id="vfb-and-then-28-1" value="4.50" class="vfb-radio inline" /> 
  <label for="vfb-and-then-28-1" class="vfb-choice">4.50</label>
</span>

如果有人在字段 A(vfb-22) 中输入值。我需要 jQuery 将输入单选按钮和标签的值更改为 A * 当前值

我目前得到所有相关数字并正确更新另一个字段（vfb-42），如下所示

$('#vfb-monthly-tickets-4-50-each-86').change(function() { 
  var number=$('input[name=vfb-86]').val();
  var multiplier=4.50;
  total=number*multiplier;
  $('input[name=vfb-42]').val(total);
})

我所缺少的只是更改单选按钮 (vfb-28) 的值。我有几次刺伤，没有成功的价值标签。

感谢任何想法

【问题讨论】：

HTML 的结构总是这样吗？？
这就是它从插件中出来的方式，经过编辑以删除多余的字段，但这就是我必须使用的

标签： jquery wordpress

【解决方案1】：

如果 HTML 总是这样构造.. 你可以试试这个

$('.vfb-text').on('change' , function() {  // change event of textbox
  var $this = $(this);      // cache the selector

  var count = this.value ;  // textbox value
  var cost = $this.nextAll('span:first').find('.vfb-choice').text(); 
  // Label text value
  total=number * cost ;

  $this.next('vfb-desc').text(total);    // populate label
  $this.nextAll('span:first').find('.vfb-radio').val(total); 
  // new value of checkbox
});

【讨论】：

【解决方案2】：

诚然，这只是您自己方法的重构，但您可以尝试：

$('input[name=vfb-22]').change(function() { 
  var number=$('input[name=vfb-22]').val();
  var current = $('input[name=vfb-28]').val();

  total=number*current;

  $('input[name=vfb-22]').val(total);
  $('.vfb-choice').text(total);
});

【讨论】：