如何创建下拉复选框控件？ [关闭]

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

截图：

---

更新：

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

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

由于引导程序样式的样式看起来类似于带有一组btn classes 的按钮，因此您可以在输入元素周围使用任何您想要的元素。如果您担心验证，在这种情况下，您可以change the button element to a div。