javascript - Twitter bootstrap 通过 Javascript in rails 管理多个单选按钮

Question

我在我的 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 次)

Answer 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());
});

这只是根据 id 末尾的数字针对隐藏的 input 字段。