如何将 Bootstrap 中的按钮组转换为表单的单选式输入？

Posted 2023-05-08

【中文标题】如何将 Bootstrap 中的按钮组转换为表单的单选式输入？

【英文标题】：How do I turn a button group in Bootstrap into a radio-style input to my form?

【发布时间】：2012-05-03 15:17:54

【问题描述】：

我有以下使用 Bootstrap 创建单选按钮组的 html。

<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 中做到这一点？

【参考方案1】：

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

用简单的英语，选择读作：

给我价值 button元素 按name 属性过滤，其值为

rating

（组） 和 CSS 类 active（表示它已被选中）

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

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

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

$('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/

【讨论】：

这样你应该给点击的按钮添加一个类，否则你会选择一个元素数组，这就是种族灭绝，你如何检查用户何时点击另一个按钮？ $(this).attr("value") 和 $(this).val(); 都返回值而不添加类。

我认为您是对我的答案投反对票的人。这是一个Bootstrap radio button group，而不仅仅是一个可以随意单击和关闭的按钮元素的随机列表。 Bootstrap 自动将active 类添加到组中的选中按钮，该按钮只能是单个元素。

是的，我做到了，到目前为止我还没有开发过带有引导程序的应用程序。希望您的回答对缺席的 OP 有所帮助；）

大家好，抱歉回复晚了。那么这实际上是如何传递到表单中的呢？我必须使用 jQuery 的 Submit 调用，还是可以使用普通的 HTML 表单来实现它？

【参考方案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);
  

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【参考方案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="" />

【参考方案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 和一个input（我更喜欢使用type="hidden"，但type="text" 适合测试）在@ 之后987654328@div.

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

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

【讨论】：

是的，这绝对是可能的。尽管 Bootstrap 3 RC1 现在也支持这一点。如果您不想升级到 BS3，请尝试修改代码，如果遇到问题，请提出新问题，有人或我会帮助您。

【参考方案5】：

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

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