关键词：
【中文标题】使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是啥？【英文标题】：With Twitter Bootstrap toggle radio buttons, what's the clean way to get form input?使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是什么？ 【发布时间】：2012-07-13 13:47:40 【问题描述】：我正在使用 Twitter Bootstrap 的 Javascript radio toggle buttons 并希望根据切换的状态获取表单输入。
我能找到的最简单的方法是在按钮中添加一个不可见的标签——有人抛出的here's the helpful jsFiddle 示例。
它工作得很好，但它仍然有点杂乱无章。我的问题是：从这些按钮获取表单输入的干净方式是什么，即没有额外的隐藏单选输入？
【问题讨论】：
【参考方案1】：怎么样
$(this).children('input[name="is_private"]').val()
DEMO
我想我第一次看错了您的问题...您可以创建一个隐藏的表单元素（除非您使用 AJAX，否则您在提交表单时需要它来访问值）并使用 JS 来设置它的值。
HTML
<input type="hidden" name="status" id="status" value="" />
JS
$('div.btn-group button').click(function()
$("#status").attr('value', $(this).attr('id'));
)
DEMO
【讨论】：
嘿，谢谢，但是需要一个隐藏的单选按钮似乎很麻烦。没有那些隐藏的单选按钮有没有办法做到这一点？ 您至少需要一个隐藏输入。我已经更新了我的答案。 明白了。所以没有办法绕过隐藏的输入。拥有一个实际隐藏的输入，而不是通过 CSS 使其不可见，这肯定不那么笨拙。我希望在没有额外 JS 的情况下做到这一点，但毕竟我使用的是 Bootstrap 的 JS 按钮......谢谢！【参考方案2】：其实你可以像这样使用index()函数来避免html输入元素和css：
$('div.btn-group .btn').click(function()
if ($(this).index() != $('div.btn-group .btn.active').index())
alert($(this).index());
);
我还添加了一个条件，如果已选择活动按钮，则不会收到警报。
【讨论】：
谢谢 - 但这并没有给我一个与表单一起发布的输入值。 您可以在按钮中添加value 属性并使用jquery.post() 发布这些值
Gotcha，为这种方法 +1，我很高兴知道这一点，但必须手动获取所有正常的表单输入以及特殊的单选按钮似乎并不优雅。我想我刚刚接受了您需要输入才能使普通表单帖子无缝工作，并且隐藏输入还不错（尤其是当我通过 Django 小部件自动创建和处理它们时）。跨度>
【参考方案3】：
一个与普通形式的 POST 以及 AJAX 一起工作的解决方案是有一个隐藏的输入字段来表示按钮组的当前状态。然后，您可以使用以下标记结构来处理所有这些按钮组：
<form>
<div id="test-group" class="btn-group" data-toggle="buttons-radio" data-toggle-name="testOption">
<input type="hidden" name="testOption"/>
<button type="button" class="btn" data-toggle-value="one">One</button>
<button type="button" class="btn" data-toggle-value="two">Two</button>
</div>
</form>
以及以下 Javascript 来设置页面上的任何按钮组：
$(function ()
$('div.btn-group[data-toggle-name]').each(function ()
var group = $(this);
var form = group.parents('form').eq(0);
var name = group.attr('data-toggle-name');
var hidden = $('input[name="' + name + '"]', form);
$('button', group).each(function ()
$(this).on('click', function ()
hidden.val($(this).data("toggle-value"));
);
);
);
);
Try it out on jsFiddle
【讨论】：
Twitter Bootstrap 单选框/复选框 - 如何放置 glyphicon
】TwitterBootstrap单选框/复选框-如何放置glyphicon【英文标题】：TwitterBootstrapradio/checkbox-howtoputglyphicon【发布时间】：2014-07-1017:14:27【问题描述】：使用TB，是否可以设置单选框或复选框的样式，使其显示字形而不是单选框或复选框... 查看详情
Twitter Bootstrap 按钮组控制单选按钮/复选框
】TwitterBootstrap按钮组控制单选按钮/复选框【英文标题】：TwitterBootstrapButtonGroupControlRadioButtons/Checkboxes【发布时间】：2013-02-2804:34:11【问题描述】：我正在尝试将TwitterBootstrapbuttongroup用作一组实际的表单输入控件。默认情况下，... 查看详情
使用 Bootstrap 4 展开单选按钮切换
】使用Bootstrap4展开单选按钮切换【英文标题】：RadiobuttontoggleexpandusingBootstrap4【发布时间】：2018-06-3008:27:31【问题描述】：我正在尝试使用Bootstrap4创建一个表单，在单击每个“按钮”时扩展不同的元素。它应该如何工作：按钮... 查看详情
在 ASP.NET 中设置 Twitter Bootstrap 按钮单选组的活动状态
】在ASP.NET中设置TwitterBootstrap按钮单选组的活动状态【英文标题】：SettingactivestateofTwitterBootstrapbuttonradiogroupinASP.NET【发布时间】：2013-05-2016:09:48【问题描述】：有人知道如何在TwitterBootstrap中设置按钮单选组的“活动”按钮吗？... 查看详情
Twitter Bootstrap 流体容器侧边栏切换
】TwitterBootstrap流体容器侧边栏切换【英文标题】：TwitterBootstrapfluid-containerSidebarToggle【发布时间】：2012-03-0122:11:26【问题描述】：我正在使用twitterbootstrap开发应用程序。2列布局。一个侧边栏和主要内容。以下是布局。<divclass=... 查看详情
Twitter bootstrap 崩溃：更改切换按钮的显示
】Twitterbootstrap崩溃：更改切换按钮的显示【英文标题】：Twitterbootstrapcollapse:changedisplayoftogglebutton【发布时间】：2013-04-1922:20:51【问题描述】：我正在使用TwitterBootstrap创建可折叠的文本部分。当按下+按钮时，这些部分会展开。... 查看详情
覆盖 Twitter Bootstrap 3 的广播组“onclick”事件
】覆盖TwitterBootstrap3的广播组“onclick”事件【英文标题】：OverwriteTwitterBootstrap3\'sradiogroup"onclick"event【发布时间】：2015-07-1704:39:10【问题描述】：我基本上使用twitterbootstrap的ButtonGroup组件使用两个单选按钮创建了一个开/... 查看详情
在 Meteor 中获取 twitter bootstrap 单选按钮组的值
】在Meteor中获取twitterbootstrap单选按钮组的值【英文标题】：GetvalueoftwitterbootstrapradiobuttongroupinMeteor【发布时间】：2013-08-0818:50:41【问题描述】：我知道有很多关于此的主题，但不幸的是，我找不到可行的解决方案。所以这是我的... 查看详情
Twitter Bootstrap 选项卡活动类切换不起作用
】TwitterBootstrap选项卡活动类切换不起作用【英文标题】：TwitterBootstrapTabsactiveclasstogglenotworking【发布时间】：2013-04-1022:42:35【问题描述】：我正在使用Twitter引导导航选项卡和导航药片。这是我的html代码：<divclass="Header2"style="ba... 查看详情
在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定不起作用
】在AngularJS+Bootstrap中添加数据切换属性时，单选按钮绑定不起作用【英文标题】：Radiobuttonsbindingisnotworkingwhenadata-toggleattributeisaddedinAngularJS+Bootstrap【发布时间】：2016-01-0303:54:58【问题描述】：我正在使用AngularJS和TwitterBootstrap，... 查看详情
href 导致使用 Angularjs 和 Twitter Bootstrap 意外重新加载页面
】href导致使用Angularjs和TwitterBootstrap意外重新加载页面【英文标题】：hrefcausesunintendedpagereloadwithAngularjsandTwitterBootstrap【发布时间】：2013-06-1913:35:14【问题描述】：我正在开发一个使用Angularjs和TwitterBootstrap的项目。Bootstrap使用#来... 查看详情
使用 Twitter Bootstrap 触发导航选项卡的按钮
】使用TwitterBootstrap触发导航选项卡的按钮【英文标题】：ButtontoTriggerNav-TabwithTwitterBootstrap【发布时间】：2013-05-0323:42:35【问题描述】：这个按钮触发下一个标签页加载内容，但是标签页本身并没有切换，它仍然在第一个标签页... 查看详情
无法在 Twitter Bootstrap 切换选项卡中设置默认值
】无法在TwitterBootstrap切换选项卡中设置默认值【英文标题】：Can\'tSetDefaultinTwitterBootstrapToggleableTab【发布时间】：2012-05-0511:07:37【问题描述】：这些选项卡在单击时运行良好，但在窗口加载时选择默认选项卡失败。javascript运行... 查看详情
Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分
】TwitterBootstrap按钮单击以切换按钮上方的展开/折叠文本部分【英文标题】：TwitterBootstrapbuttonclicktotoggleexpand/collapsetextsectionabovebutton【发布时间】：2012-08-1116:12:55【问题描述】：我最近遇到了引导程序，我正在努力扩展hero示例。... 查看详情
Twitter Bootstrap：如何为收音机和复选框添加标签？
】TwitterBootstrap：如何为收音机和复选框添加标签？【英文标题】：TwitterBootstrap:howtoputalabelforradioandcheckbox?【发布时间】：2012-12-1700:02:20【问题描述】：是否存在引入单选和复选框选项的TB方式？例如：Foo选项介绍：富一富二基本... 查看详情
Twitter typeahead .js 文件未更新
...发布时间】：2013-08-2413:39:41【问题描述】：我目前正在从BootsTrap2.3切换到Bootstrap3.0。众所周知，bootstrap3.0中没有预先输入，所以我使用的是twitter：https://github.com/twitter/typeahead.js/我可以查询，但由 查看详情
Twitter Bootstrap HTML 表单单选按钮不适用于 PHP POST
】TwitterBootstrapHTML表单单选按钮不适用于PHPPOST【英文标题】：TwitterBootstrapHTMLformradiobuttonnotworkingwithPHPPOST【发布时间】：2013-02-1816:42:11【问题描述】：由于某种原因，在使用TwitterBootstrap框架时，我的表单中的单选按钮值未传递到... 查看详情
bootstrap轮播图的切换按钮如何制作？
参考技术A//在自定义css样式中加入下面代码，自定义css在bootstrap.min.css后引入；.carousel>.left,.carousel>.rightbackground-image:none；Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵... 查看详情