2

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

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Andrey Langovoy
  • 795
  • 2
  • 7
  • 15
  • That question is already asked here [link](http://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown) – Stanimir Yakimov Jul 07 '14 at 17:29
  • You cannot do that using an html select control, but you can use a div for that, or a list – Rafael Jul 07 '14 at 17:30
  • Thank you. However, how can I do this without any libraries? The solution you have provided is based on dropdown-check-list library. How it can be done with js+html+css? thank you. Moreover I do not need the drop-down checklist. I need a drop-down check-box! (with the check list) – Andrey Langovoy Jul 07 '14 at 17:35
  • SO is not designed to help with what you want, or prefer but rather to find solutions for problems. If your question showed code of what you have tried or an idea of what you were going for then you would get a lot more help. Currently you have asked for somebody else to provide you with something ready to go, and ready to go is invariably using a library. You could make what you are asking for within about 10 minutes quite easily especially with bootstrap. Maybe try asking a different question and basing on code you have tried. – Derple Jul 07 '14 at 18:03

1 Answers1

4

You can use a Split Button Dropdown to style it.

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

Here's an example:

<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:

.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.

Community
  • 1
  • 1
KyleMit
  • 30,350
  • 66
  • 462
  • 664