带有下拉按钮的单选按钮组答案

【问题标题】：radio button group with dropdown button带有下拉按钮的单选按钮组
【发布时间】：2017-10-11 01:03:56
【问题描述】：

您好，我想创建一组带有引导程序的单选按钮，其中最后一个按钮是下拉按钮，这是我到目前为止的代码，基本上我希望最后一个按钮是下拉按钮

<div class="btn-group" data-toggle="buttons">
        <label id='Radio 1' class="btn btn-primary">
            <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option4" autocomplete="off"> Radio 4
        </label>
    </div>

【问题讨论】：

标签： html twitter-bootstrap drop-down-menu radio-button

【解决方案1】：

这就是您想要尝试和做的事情吗？您可以使用引导单按钮下拉菜单构建下拉菜单，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
  <label id='Radio 1' class="btn btn-primary">
    <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
  <div class="btn-group">
    <label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <input type="radio" class="" name="options" id="option4" autocomplete="off"> Radio 4 <span class="caret"></span>
    </label>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

见Bootstrap Single button dropdowns

【讨论】：

是的，这正是我想要做的，除了，还有一件事，你现在拥有的方式是，当点击前 3 个按钮中的任何一个，然后点击单选 4被点击，之前点击的按钮仍然被点击，我想要的是当点击4时，之前点击的按钮应该变成未点击

【解决方案2】：

一种解决方案可能是在切换下拉菜单时删除活动类：

$('.dropdown-toggle').click(function(){
  $('.btn').removeClass('active');
});

示例：https://jsfiddle.net/uLa818o3/

【讨论】：

非常感谢，解决了我剩下的部分问题