Get selected checkboxes from a dropdown

Question

I have checkboxes inside a dropdown menu. I've to get the checkboxes which are selected (checked)

Code:

  <ul role="menu" class="dropdown-menu" id="comp">
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Monday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Tuesday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Wednesday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Thursday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Friday</span>
      </a>
   </li>
</ul>
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit"> 
<script type="text/javascript">
    function myFunction()
    {
    /* Get selected check boxes here */
    }
</script>

Possible duplicate of [Get a list of checked checkboxes in a div using jQuery](http://stackoverflow.com/questions/2155622/get-a-list-of-checked-checkboxes-in-a-div-using-jquery) — Guruprasad J Rao, May 03 '16 at 04:57
show how you've tried.. On what event you want to get the selected checkboxes? — Guruprasad J Rao, May 03 '16 at 04:59
@krish, On which event you are accessing the states of the `check-boxes` ? How does your JS look like ? — Rayon, May 03 '16 at 05:01
@krish, `checkbox` should have a `value` attribute.. How will you differentiate ? — Rayon, May 03 '16 at 05:07

score 2 · Answer 1 · answered May 03 '16 at 05:28

You can try this solution also. Here you will get the checked checkbox elements list. You can also update this checked element list during run time also.

Check the following demo:

Fiddle Demo

Stack Example

$(function() {
  var checkedItems = $("#comp input:checked");
  console.log(checkedItems);
  $("#comp input[type='checkbox']").change(function() {
    if ($(this).attr("checked") == "checked") {
      checkedItems.push($(this)[0]);//Add the checked element
      console.log(checkedItems);
    } else {
      checkedItems.splice($.inArray($(this)[0], checkedItems), 1);//Remove the unchecked element
      console.log(checkedItems);
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul role="menu" class="dropdown-menu" id="comp">

  <li>
    <a href="#">
      <input type="checkbox" id="a1">
      <span class="lbl"> Monday</span>
    </a>
  </li>
  <li>
    <a href="#">
      <input type="checkbox" id="a2">
      <span class="lbl"> Tuesday</span>
    </a>
  </li>
  <li>
    <a href="#">
      <input type="checkbox" id="a3" checked="checked">
      <span class="lbl"> Wednesday</span>
    </a>
  </li>
  <li>
    <a href="#">
      <input type="checkbox" id="a4">
      <span class="lbl"> Thursday</span>
    </a>
  </li>
  <li>
    <a href="#">
      <input type="checkbox" id="a5">
      <span class="lbl"> Friday</span>
    </a>
  </li>


</ul>

score 1 · Answer 2 · answered May 03 '16 at 05:04

Check the console for selected checkboxes.

function myFunction(){
    var checkBoxes=$("#comp input[type=checkbox]:checked");
    console.log(checkBoxes);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul role="menu" class="dropdown-menu" id="comp">
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Monday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Tuesday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Wednesday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Thursday</span>
      </a>
   </li>
   <li><a href="#">
      <input type="checkbox">
      <span class="lbl"> Friday</span>
      </a>
   </li>
</ul>
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit">

score -1 · Answer 3 · answered May 03 '16 at 05:01

Try it, it will return all selected checkbox values as you select any checkbox:

<ul role="menu" class="dropdown-menu" id="comp">
    <li><a href="#">
    <input name="chklist" onclick="get_selected_val()" value="monday" type="checkbox">
    <span class="lbl"> Monday</span>
    </a></li>
    <li><a href="#">
    <input name="chklist" onclick="get_selected_val()" value="tuesday" type="checkbox">
    <span class="lbl"> Tuesday</span>
    </a></li>
    <li><a href="#">
    <input name="chklist" value="wednesday" onclick="get_selected_val()" type="checkbox">
    <span class="lbl"> Wednesday</span>
    </a></li>
    <li><a href="#">
    <input name="chklist" onclick="get_selected_val()" value="thursday" type="checkbox">
    <span class="lbl"> Thursday</span>
    </a></li>
    <li><a href="#">
    <input name="chklist" onclick="get_selected_val()"  value="friday" type="checkbox">
    <span class="lbl"> Friday</span>
    </a></li>
</ul>


function get_selected_val() {
 $('input[name="chklist"]:checked').each(function() {
   console.log(this.value);
 });
}

Get selected checkboxes from a dropdown

3 Answers3