Html Twitter 引导单选按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11462434/
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
Twitter bootstrap radio buttons not working
提问by Scott
I got a problem with the twitter bootstrap javascript radio buttons. When I select one and then click the submit button, it doesn't show the selected radio value.
我的 twitter bootstrap javascript 单选按钮有问题。当我选择一个然后单击提交按钮时，它不会显示选定的单选值。
My code:
我的代码：
<form action="" class="form-horizontal" method="post">
<fieldset>
<div class="control-group">
<label class="control-label">Type:</label>
<div class="controls">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
<button type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
</div>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Go">
<a href="index.php" class="btn">Back</a>
</div>
</fieldset>
</form>
As you can see, there is a name="option" value="1"and name="option" value="2"but when I select one radio and I do:
如您所见，有一个name="option" value="1"andname="option" value="2"但是当我选择一个收音机时，我会这样做：
<?php print_r($_POST); ?>
<?php print_r($_POST); ?>
There is no optionpost specified.
没有option指定帖子。
It happens only for the twitter radio buttons, because when I add <input type="text" name="test" value="something"/>then it will appear in the $_POSTvariable.
它只发生在 twitter 单选按钮上，因为当我添加时<input type="text" name="test" value="something"/>它会出现在$_POST变量中。
Where is the problem?
问题出在哪儿？
回答by Ben Rowe
The problem is <button>doesn't submit anything when clicked. You will need to have a hidden input field, and trigger a value change within the input when clicking the button
问题是<button>单击时不提交任何内容。您需要有一个隐藏的输入字段，并在单击按钮时触发输入中的值更改
<input type="hidden" name="option" value="" id="btn-input" />
<div class="btn-group" data-toggle="buttons-radio">
<button id="btn-one" type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
<button id="btn-two" type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
</div>
<script>
var btns = ['btn-one', 'btn-two'];
var input = document.getElementById('btn-input');
for(var i = 0; i < btns.length; i++) {
document.getElementById(btns[i]).addEventListener('click', function() {
input.value = this.value;
});
}
</script>
In the case of the bootstrap the 'radio' only affects the button state & behavior. It doesn't effect the form behaviour.
在引导程序的情况下，“收音机”仅影响按钮状态和行为。它不会影响表单行为。
回答by Michael Andrei Trimm
This is a jquery alternative to the above piece.
这是上述部分的 jquery 替代方案。
$("body").find(".btn").each(function(){
$(this).bind('click', function(){
$("input[name=view-opt-bt-group-value]").value = this.value
});
});
The HTML to this is:
对此的 HTML 是：
<div class="row pull-right">
<div class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" value="0"><i class="icon-th-list"></i></button>
<button type="button" class="btn" value="1"><i class="icon-th-list"></i></button>
<input type="hidden" name="view-opt-bt-group-value" value="0">
</div>
</div>
回答by mcNux
You can add the btnclass to <label>s, so I achieved the following which doesn't require a hidden input, degrades gracefully if no bootstrap or javascript and you can still use the html helpers.
您可以将btn类添加到<label>s，因此我实现了以下不需要隐藏输入的方法，如果没有引导程序或 javascript 则优雅地降级，并且您仍然可以使用 html 帮助程序。
试试看。
<div class="btn-group" data-toggle="buttons-radio">
<label class="btn">@Html.RadioButton("option", 1) Option 1</label>
<label class="btn">@Html.RadioButton("option", 2) Option 2</label>
</div>
...
<script type="text/javascript">
$(function () {
// Bootstrappable btn-group with checkables inside
// - hide inputs and set bootstrap class
$('.btn-group label.btn input[type=radio]')
.hide()
.filter(':checked').parent('.btn').addClass('active');
});
</script>
Update:They're using this format now in Bootstrap 3 but it requires slightly different markup (namely data-toggle="buttons"). See http://getbootstrap.com/javascript/#buttons
更新：他们现在在 Bootstrap 3 中使用这种格式，但它需要稍微不同的标记（即data-toggle="buttons"）。请参阅http://getbootstrap.com/javascript/#buttons
回答by Alastair
The simplest jQuery code I came up with was:
我想出的最简单的 jQuery 代码是：
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" onClick="$('#gender').val('f');">♀</button>
<button type="button" class="btn" onClick="$('#gender').val('m');">♂</button>
</div>
<input name="gender" id="gender" type="hidden" value="">
It's an exceptional use-case, for me, so it didn't need to be robust or flexible.
对我来说，这是一个特殊的用例，所以它不需要很健壮或灵活。
回答by Vadym Tyemirov
My answer is based on https://stackoverflow.com/a/16214643/1111662by @mcNux
我的回答基于@mcNux 的https://stackoverflow.com/a/16214643/1111662
In your view (I use HAML but convert to ERB if needed)
在您看来（我使用 HAML，但如果需要可以转换为 ERB）
.btn-group{data:{toggle: "buttons-radio"}}
%label.btn
= f.radio_button :gender, "Male"
Male
%label.btn
= f.radio_button :gender, "Female"
Female
In your view-specific javascript e.g. pages.js.coffee(again, I use CoffeeScript but convert to plain JS JQuery if needed)
例如pages.js.coffee，在您特定于视图的 javascript 中（同样，我使用 CoffeeScript 但如果需要转换为普通的 JS JQuery）
$(document).ready ->
$('.btn-group label.btn input[type=radio]')
.hide()
.filter(':checked').parent('.btn').addClass('active')
