Javascript 使用 Twitter Bootstrap 切换单选按钮，获取表单输入的干净方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11475069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
With Twitter Bootstrap toggle radio buttons, what's the clean way to get form input?
提问by Ghopper21
I am using Twitter Bootstrap's Javascript radio toggle buttonsand want to get form input based on the state of the toggle.
我正在使用 Twitter Bootstrap 的Javascript 单选切换按钮，并希望根据切换状态获取表单输入。
The simplest approach I could find is to add an invisible tag within the buttons -- here's the helpful jsFiddleexample that someone threw up.
我能找到的最简单的方法是在按钮内添加一个不可见的标签——这是有人吐出的有用的 jsFiddle示例。
It works nicely, but it's still sort of a kludge. My question is: what's the clean way to get form input from these buttons, i.e. without the extra hidden radio inputs?
它工作得很好，但它仍然有点混乱。我的问题是：从这些按钮获取表单输入的干净方法是什么，即没有额外隐藏的无线电输入？
回答by sachleen
How about
怎么样
$(this).children('input[name="is_private"]').val()
I think I misread your question the first time... You can create a hidden form element (you need it to access the value when you submit the form unless you do AJAX) and use JS to set its value.
我想我第一次误读了您的问题...您可以创建一个隐藏的表单元素（除非您执行 AJAX，否则您在提交表单时需要它来访问该值）并使用 JS 设置其值。
HTML
HTML
<input type="hidden" name="status" id="status" value="" />
JS
JS
$('div.btn-group button').click(function(){
$("#status").attr('value', $(this).attr('id'));
})?
回答by kschaeffler
Actually you can avoid the html input element and the css using the index()function like this:
实际上，您可以使用如下index()函数避免 html 输入元素和 css ：
$('div.btn-group .btn').click(function(){
if ($(this).index() != $('div.btn-group .btn.active').index()){
alert($(this).index());
}
})?;
I also added a condition to not get the alert if the active button is already selected.
我还添加了一个条件，如果已选择活动按钮，则不会收到警报。
回答by Tim
A solution that works well with plain form POST as well as AJAX is to have a hidden input field that represents the current state of the button group. You can then handle all these button groups the same using the following markup structure:
一个适用于普通表单 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>
And the following Javascript to setup any button groups on a page:
以及以下用于在页面上设置任何按钮组的 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"));
});
});
});
});
