我要完成的工作：
我试图制作一个表单，当用户选择yes时，div向下滑动，当用户选择no时div向上滑动（从而使该div中的内容不可见）。而且我希望它具有一个不错的显示效果（看起来几乎像一个可以切换的组中的按钮，并且一次只能切换一个按钮，例如单选按钮），它应该看起来或多或少是这样的：
http://getbootstrap.com/components/#btn-groups
我的问题是：
当我切换此按钮时，它将不会触发功能。
奇怪的是，
我注意到当我不设置data-toggle =“ buttons”时，会得到带有小圆圈的单选按钮并触发该功能，但是当我设置data-toggle =“ buttons”时，它将不会触发功能。
这是我的表格：
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
和我试图激发的功能：
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
谁能帮助我让单选按钮看起来像引导程序（并且一旦被选中，它们保持颜色），但是功能正常？
谢谢
我最终在这里使用此开关：http : //proto.io/freebies/onoff/这是html：
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
这是jQuery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
似乎与jquery，bootstrap和jquery-ui确实存在冲突。我将不得不做一些代码清理，以查看确切的冲突位置。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句