Html Twitter引导单选按钮不工作
我对twitter引导javascript单选按钮有问题。当我选择一个,然后单击提交按钮时,它不会显示所选的单选值 我的代码:Html Twitter引导单选按钮不工作,html,forms,twitter-bootstrap,radio-button,Html,Forms,Twitter Bootstrap,Radio Button,我对twitter引导javascript单选按钮有问题。当我选择一个,然后单击提交按钮时,它不会显示所选的单选值 我的代码: <form action="" class="form-horizontal" method="post"> <fieldset> <div class="control-group"> <label class="control-label">Type:</label> &
<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>
类型:
选择一
选择二
如您所见,有一个name=“option”value=“1”
和name=“option”value=“2”
但是当我选择一个收音机时,我会:
没有指定选项
post
这只发生在twitter单选按钮上,因为当我添加
时,它将出现在$\u POST
变量中
问题在哪里?问题是单击时不提交任何内容。您需要有一个隐藏的输入字段,并在单击按钮时触发输入中的值更改
<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>
选择一
选择二
可变btn=['btn-1','btn-2'];
var input=document.getElementById('btn-input');
对于(变量i=0;i
在引导的情况下,“单选”只影响按钮的状态和行为。它不会影响表单行为。这是上述内容的jquery替代方案
$("body").find(".btn").each(function(){
$(this).bind('click', function(){
$("input[name=view-opt-bt-group-value]").value = this.value
});
});
此文件的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>
我想到的最简单的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="">
♀
♂
对我来说,这是一个特殊的用例,因此它不需要健壮或灵活。您可以将
btn
类添加到
中,因此我实现了以下功能,它不需要隐藏输入,如果没有引导或javascript,它会优雅地退化,并且您仍然可以使用html帮助程序
@单选按钮(“选项”,1)选项1
@单选按钮(“选项”,2)选项2
...
$(函数(){
//内部带有可检查项的可引导btn组
//-隐藏输入并设置引导类
$('.btn group label.btn input[type=radio]')
.hide()
.filter(':checked').parent('.btn').addClass('active');
});
更新:他们现在在Bootstrap 3中使用这种格式,但它需要稍微不同的标记(即data toggle=“buttons”
)。请参见我的答案基于@mcNux
在您看来(我使用HAML,但如果需要,可以转换为ERB)
在视图特定的javascript中,例如pages.js.coffee
(同样,我使用CoffeeScript,但如果需要,可以转换为纯js JQuery)
我想您需要$(“input[name=view opt bt group value]”).val(this.value)这对我来说非常有用,并提供了完整的实现示例。非常感谢你。
<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>
.btn-group{data:{toggle: "buttons-radio"}}
%label.btn
= f.radio_button :gender, "Male"
Male
%label.btn
= f.radio_button :gender, "Female"
Female
$(document).ready ->
$('.btn-group label.btn input[type=radio]')
.hide()
.filter(':checked').parent('.btn').addClass('active')