Question

我想要完成的任务：
我正在尝试制作一个表单，当用户选择“是”时，div向下滑动，当用户选择“否”时，div向上滑动（从而使该div中的内容不可见）。我希望它有一个漂亮的显示（看起来几乎像一个可以切换的组中的按钮，只有一个能够一次切换，如单选按钮）它应该看起来或多或少像这样：

http://getbootstrap.com/components/#btn-groups

我的问题是什么：
当我切换此按钮时，它不会触发功能。

奇怪的地方
我注意到，当我没有设置数据切换=＆＃34;按钮＆＃34;我得到了带有小圆圈的单选按钮并触发了该功能，但是当我设置数据切换=＆＃34;按钮＆＃34;它不会启动该功能。

这是我的表格：

<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();
    }
});

任何人都可以帮我把单选按钮看起来像引导程序（一旦被选中它们保持颜色），但是有哪些功能？

由于

Answer 1

我最终在这里使用此开关： 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确实存在冲突。我将不得不最终做一些代码清理，以确切地看到它在哪里发生冲突。

具有功能的Bootstrap单选按钮

1 个答案: