Clicking text to select checkbox

Question

JSFiddle Here

This is a list of checkboxes inside a dropdown menu. I would like to be able to click the anchor tags' text to select the corresponding checkbox. However, I currently have it set to <a href="#"> which simply closes the dropdown and goes to top of page (on my own version, not JSFiddle, because it is on an overlay).

I saw a solution that selected the checkbox but the dropdown still closed on each click, is there a simple way to fix this?

Answer 1

You can use labels for this functionality. Replace your <ul> list with this one.

<ul class="dropdown-menu">
  <li>
    <input type="checkbox" id="check_1"/>
    <label for="check_1">Item 1</label>
  </li>
  <li>
    <input type="checkbox" id="check_2"/>
    <label for="check_2">Item 2</label>
  </li>
  <li>
    <input type="checkbox" id="check_3"/>
    <label for="check_3">Item 3</label>
  </li>
</ul>

This will help you