如何将引导程序中的按钮组转换为窗体的单选按钮样式输入

Question

>我有以下 HTML 使用 Bootstrap 创建一个单选按钮组。

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn" type="button" name="rating" value="1">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="2">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="3">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="4">
    <img ...>
  </button>
</div>
<button class="btn" type="submit" name="submit">Submit</button>

根据用户选择，我想从名为"rating"的单选组中以表单形式发送变量，并将值分配给所选按钮的值。 我将如何在jQuery中执行此操作？

Answer 1

$('button[name="rating"].active').val();

用简单的英语来说，选择内容如下：

• 给我价值
• button元素
• 按具有评级值的name属性（组）进行筛选
• 和 CSS 类active（表示已选择）

根据OP在评论中的新问题进行编辑：

若要从按钮捕获输入，需要使用自定义脚本处理程序。如果您的目标是实际将其与表格一起提交，我实际上建议不要这样做。 主要是因为这不是用户在表单中期望的。 只需使用常规单选按钮输入。

但是，如果您确实想要使用它，则可以执行以下操作：

$('form').submit(function() {
    var rating = $('button[name="rating"].active').val();  
    // get the rest of the values
    // submit the form
});​

下面是常规input与button的示例，以及为什么不应在窗体中使用按钮：http://jsfiddle.net/TxgVe/1/

Answer 2

这是我

的解决方案：http://jsfiddle.net/tFYV9/1/

编辑（来自jsFiddle的代码）

.HTML

<input type="text" id="hidden_ipt" value="0" />
<div class="btn-group" data-toggle="buttons-radio" data-target="hidden_ipt"> 
  <button type="button" class="btn" data-toggle="button" value="female">
    female  
  </button>
  <button type="button" class="btn" data-toggle="button" value="male">
    male
  </button>
</div>​

JavaScript

// Bootstrap Hack
var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle;
$.fn.button.prototype.constructor.Constructor.prototype.toggle = function(){
  _old_toggle.apply(this);
  var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
  var target = $parent ? $parent.data('target') : undefined;
  var value = this.$element.attr('value');
  if(target && value){
    $('#'+target).val(value);
  }
}

Answer 3

试试这个。它对我有用。我有一个巨大的表格工作了多次。

<div class="btn-group" data-toggle="buttons-checkbox">
<button onclick="javascript:document.getElementById('INPUT_ID').value='1'" type="button" class="btn">CHECK ME</button>
</div>
<input type="hidden" id="INPUT_ID" name="INPUT_ID" value="" />

Answer 4

好消息！

Bootstrap 3 现在使用input type="radio"按钮组！

但是，如果您不想升级，请参阅下面的答案：

---

我正在使用以下jQuery：

$('[data-toggle="buttons-radio"]').children(".btn").click(function(){
    var value = $(this).val();
    $(this).parent().next().val(value);
    $(this).parent().next().valid(); // Remove this if you're not using jQuery Validation
});

为此，您需要做的就是确保每个button都有一个value，并且在btn-group div之后有一个input（我更喜欢使用type="hidden"但type="text"有利于测试）。

我注意到，如果您提交表单，然后点击后退按钮，所有表单数据仍将存在，包括隐藏的输入，但按钮不会处于活动状态。要解决此问题，请添加以下额外的jQuery：

$('[data-toggle="buttons-radio"]').each(function(){
    var that = $(this);
    var value = that.next().val();
    if(value != "") {
        that.children("button[value="+value+"]").addClass("active");
    }
});

Answer 5

您可以使用我的插件bootstrap-form-buttonset来蒙皮收音机或复选框来引导按钮组。它与 Bootstrap 2 和 Bootstrap 3 兼容。

只需编写普通的旧无线电输入，将它们包装在一起并呼叫$('.my-wrapper').bsFormButtonset('attach').就是这样。