2

我在我的 rails 应用程序中使用 twitter bootstrap，并且正在构建一个带有多个单选按钮输入的表单。为了管理表单数据，我创建了一个隐藏字段，其值通过 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>

我的问题：有没有办法以同时应用于多个单选按钮输入的方式抽象 Javascript 代码？（例如，如果我用不同的 id 重复上面的代码块 3 次）

4

3 回答 3

1

假设这是您的带有多组按钮的 HTML：

<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="">

要动态监听所有按钮组的点击，您可以执行以下操作（未经测试的 jQuery）：

$('.btn-group .btn').on('click', function() {
    var parentID = $(this).parent().attr('id');
    $('#hidden_' + parentID.substr(parentID.length - 1)).val($(this).val());
});

input这只是根据末尾的数字来定位隐藏字段id。

于 2012-10-13T05:27:18.187 回答
0

使用 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代码中只需使用，

var buttonObjs = $(".btn-group.js_radio_toggle").find("button");

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

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

document.getElementsByClassName("js_radio_toggle").

但我建议你使用 jQuery。

于 2012-10-13T04:49:27.710 回答
0

尝试使用这个：

for(var i = 0; i <= btns.length; i++) {
于 2012-10-12T19:33:10.910 回答