如何将Bootstrap中的按钮组转换为表单的无线电输入？
我有以下HTML使用Bootstrap创建一个单选按钮组。
根据用户选择，我想从名为“rating”的无线电组中发送表格中的变量，并将值分配给所选按钮的值。 我将如何在jQuery中执行此操作？
$('button[name="rating"].active').val();
用简单的英语表示选择如下：
- 给我价值
-
button元素 - 按
name属性筛选，其值为rating （组） - 并且CSS类
active（表示已选中）
在评论中根据OP的新问题进行编辑：
要从按钮捕获输入，您需要使用自定义脚本处理程序。 如果您的目标是使用表单实际提交此内容，我实际上会反对它。 主要是因为这不是用户期望的forms。 只需使用常规单选按钮输入即可。
但是，如果您确实要使用此function，则可以执行以下操作：
$('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/
这是我的解决方案： http ： //jsfiddle.net/tFYV9/1/
编辑 （来自jsFiddle的代码）
HTML
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); } }
试试这个。 它对我有用。 我有一个巨大的forms多次工作。
好消息！
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"); } });
您可以将我的插件bootstrap-form-buttonset用于皮肤无线电或复选框以引导按钮组。 它与Bootstrap 2和Bootstrap 3兼容。
只需编写普通的旧无线电输入，将它们包装在一起并调用$('.my-wrapper').bsFormButtonset('attach') 。 而已。