如何创建下拉复选框控件？

Question

有人可以告诉我如何创建一个下拉复选框吗？

应该可以单独选中/取消选中复选框，也可以单击切换按钮调用菜单。

这是gmail的一个例子：

Answer 1

您可以使用Split Button Dropdown来设置样式。

然后用<input type="checkbox"/>

替换主按钮文本

以下是一个例子：

<div class="btn-group">
  <div type="button" class="btn btn-default">
      <input type="checkbox" class="splitButtonInput"/>
  </div>

  <button type="button" class="btn btn-default dropdown-toggle" 
          data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

处理点击次数取决于您和您的业务规则

Demo in jsFiddle

<强>截图：

---

更新

要解决行高问题，只需打开开发人员工具，看看是什么让它偏离中心。在这种情况下，它是一个默认的边距，bootstrap适用于所有复选框;通过添加另一个规则来杀死它：

.splitButtonInput[type="checkbox"] {
    margin: 0;
}

由于引导程序将事物设置为外观，就像具有btn classes集的按钮一样，您可以在输入元素周围使用任何您想要的元素。如果您担心验证，在这种情况下，您可以change the button element to a div。