Twitter Bootstrap单选按钮无法使用

Question

我在使用 Twitter Bootstrap 的 JavaScript 单选框时遇到了问题。当我选择一个选项后，点击提交按钮时，它不会显示所选的单选框值。

我的代码：

<form action="" class="form-horizontal" method="post">
  <fieldset>
    <div class="control-group">
      <label class="control-label">Type:</label>
      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
          <button type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
        </div>
      </div>
    </div>
    <div class="form-actions">
      <input class="btn btn-primary" type="submit" value="Go">
      <a href="index.php" class="btn">Back</a>
    </div>
  </fieldset>
</form>

从下面代码可以看出，有一个 name="option" value="1" 和 name="option" value="2"，但是当我选择其中一个单选按钮并运行以下代码：

<?php print_r($_POST); ?>

没有指定 option 的提交。

这只发生在 Twitter 单选按钮上，因为当我添加 <input type="text" name="test" value="something"/> 时，它会出现在 $_POST 变量中。

问题出在哪里？

- Scott

Answer 1

问题是当点击<button>时，它不会提交任何内容。您需要添加一个隐藏的输入字段，并在单击按钮时触发输入字段的值更改。

<input type="hidden" name="option" value="" id="btn-input" />
<div class="btn-group" data-toggle="buttons-radio">  
  <button id="btn-one" type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
  <button id="btn-two" type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
</div>

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

对于Bootstrap，'radio'仅影响按钮的状态和行为，不会影响表单的行为。

- Ben Rowe

---

这对我非常有效，还附带有完整的实现示例。非常感谢。 - JLZenor

Answer 2

这是一个替代上述代码的jQuery方案。

$("body").find(".btn").each(function(){
    $(this).bind('click', function(){
      $("input[name=view-opt-bt-group-value]").value = this.value
    });
  });

这里的 HTML 代码是：

<div class="row pull-right">
  <div class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" value="0"><i class="icon-th-list"></i></button>
    <button type="button" class="btn" value="1"><i class="icon-th-list"></i></button>
    <input type="hidden" name="view-opt-bt-group-value" value="0">
  </div>
</div>

- Michael Andrei Trimm

---

我认为你想要的是$("input[name=view-opt-bt-group-value]").val(this.value)。 - bonhoffer

Answer 3

你可以将btn类添加到<label>中，这样我就实现了以下功能，它不需要隐藏的输入，如果没有引入Bootstrap或JavaScript，它也能正常降级，而且你仍然可以使用HTML助手。

试一下。

<div class="btn-group" data-toggle="buttons-radio">
   <label class="btn">@Html.RadioButton("option", 1) Option 1</label>
   <label class="btn">@Html.RadioButton("option", 2) Option 2</label>
</div>
...
<script type="text/javascript">
    $(function () {
        // Bootstrappable btn-group with checkables inside
        // - hide inputs and set bootstrap class
        $('.btn-group label.btn input[type=radio]')
          .hide()
          .filter(':checked').parent('.btn').addClass('active');
    });
</script>

更新：现在Bootstrap 3中使用此格式，但需要稍微不同的标记（即data-toggle="buttons"）。请参见http://getbootstrap.com/javascript/#buttons

- mcNux

Answer 4

我为您提供的最简单的jQuery代码是：

我想到的最简单的jQuery代码是：

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" onClick="$('#gender').val('f');">♀</button>
    <button type="button" class="btn" onClick="$('#gender').val('m');">♂</button>
</div>
<input name="gender" id="gender" type="hidden" value="">

对我来说，这是一个特殊的使用情况，因此不需要具备坚固和灵活的特性。

- Alastair

Answer 5

我的答案基于 @mcNux 的 https://dev59.com/S2gu5IYBdhLWcg3wQE4D#16214643。

在您的视图中（我使用 HAML，但如有需要可转换为 ERB）。

.btn-group{data:{toggle: "buttons-radio"}}
  %label.btn
    = f.radio_button :gender, "Male"
    Male
  %label.btn
    = f.radio_button :gender, "Female"
    Female

在你的视图特定的 javascript 文件中，例如 pages.js.coffee（我使用 CoffeeScript 但如果需要则转换为普通 JS JQuery）。

$(document).ready ->
  $('.btn-group label.btn input[type=radio]')
    .hide()
    .filter(':checked').parent('.btn').addClass('active')

- Vadym Tyemirov