Twitter引导程序通过rails中的Javascript管理多个单选按钮

我在rails应用程序中使用twitter引导，并且我正在构建一个包含多个单选按钮输入的表单。为了管理表单数据，我创建了一个隐藏字段，其值通过Javascript更新

以下任何给定输入的示例代码：

<div class="btn-group" data-toggle="buttons-radio">
          <button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
          <button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
        </div>
        <input type="hidden" id="ornamental_only" name="ornamental_only" value="">

对
不

以下是管理此事件的Javascript：

<script>
  var btns = ['ornamental_only_yes', 'ornamental_only_no'];
  var input = document.getElementById('ornamental_only');
  for(var i = 0; i < btns.length; i++) {
    document.getElementById(btns[i]).addEventListener('click', function() {
      input.value = this.value;
    });
  }
</script>

var btns=[“仅装饰性的”是“，“仅装饰性的”否“；
var input=document.getElementById（'u only'）；
对于（变量i=0；i

我的问题是：是否有一种方法可以将Javascript代码抽象为同时应用于多个单选按钮输入？（例如，如果我用不同的id重复了上面的代码块3次）

尝试使用以下方法：

for(var i = 0; i <= btns.length; i++) {

for（var i=0；i使用jQuery

var buttonObjs = $(".btn-group").find("button");
buttonObjs.click(function(){
  $("#ornamental_only").val(this.value);  
});

要将此代码应用于多个块，只需将特定类分配给btn group元素，如

<div class="btn-group js_radio_toggle"> 

现在，这段代码可以在任何地方重用

也在你的js代码中。你可以这样做

document.getElementsByClassName("js_radio_toggle").

但我建议您使用jQuery。
假设这是一个包含多组按钮的HTML：

var buttonObjs = $(".btn-group").find("button");
buttonObjs.click(function(){
  $("#ornamental_only").val(this.value);  
});

<div class="btn-group" id="btn_group_1" data-toggle="buttons-radio">
    <button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
    <button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_1" name="ornamental_only" value="">
<div class="btn-group" id="btn_group_2" data-toggle="buttons-radio">
    <button type="button" class="btn" id="awesome_only_yes" name="awesome_only" value="yes">Yes</button>
    <button type="button" class="btn" id="awesome_only_no" name="awesome_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_2" name="awesome_only" value="">

这只针对基于
id
末尾数字的隐藏
input
字段，我不确定您是如何使用jQuery的？您的问题被标记为jQuery，但您的示例中没有任何问题。使用jQuery库，您的代码是本机javascript。查看我的answer@ManjunathManohar我想你是一个d moin误解了这个问题。他在问如何将此代码应用于多组按钮（从这个示例推断）。@Sara明白了。我已经更新了我的答案谢谢，如果可以的话，我会对此进行投票，但我还没有足够的声誉：-/$（“#装饰性的#u”）.val（this.value）；这段代码是否意味着每个按钮组都需要一行类似的代码？例如，如果我有另一个按钮组，我需要在这里指定所有的名称字段：$（“#装饰性_only_1”）.val（this.value）；$（“#装饰性_only_2”）.val（this.value）；等等。这很好用！谢谢Sara。要让这段代码起作用，我是否总是需要id=“btn#u-group_-x”以及id=“hidden_1”值？或者代码仅与hidden id增量值一起工作吗？
btn_group.*
末尾的数字必须与
hidden.*
上的数字匹配（以指示它们被分组在一起）。因此，是的，您需要在两者上都使用数字。
$('.btn-group .btn').on('click', function() {
    var parentID = $(this).parent().attr('id');
    $('#hidden_' + parentID.substr(parentID.length - 1)).val($(this).val());
});