How to create a drop down checkbox control?

Profile picture for Andrey Langovoy
Andrey Langovoy

Can anybody please tell me how to create a dropdown checkbox?

It should be able to separately select/unselect the check box and also click the toggle to call the menu.

Here's an example from gmail:

screenshot

You can use a Split Button Dropdown to style it.

Then replace the main button text with <input type="checkbox"/>

Here's an example:

<!-- language: lang-html --> 
<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>

Handling clicks is up to you and your business rules

Demo in jsFiddle

Screenshot:

screenshot

Update:

To address the line height issue, just open up your developer tools and see what's making it off center. In this case, it's a default margin that bootstrap applies to all checkboxes; kill it by adding another rule like this:

<!-- language: lang-css --> 
.splitButtonInput[type="checkbox"] {
    margin: 0;
}

Since bootstrap styles things to look like buttons with the set of btn classes, you can use any element you want around the input element. If you're worried about validation, in this case, you can change the button element to a div.