javascript - 从下拉列表中获取选中的复选框

Question

我在下拉菜单中有复选框。我必须得到选中(选中)的复选框

代码:

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

Answer 1

您也可以尝试这个解决方案。在这里您将获得选中的复选框元素列表。您也可以在运行时更新这个选中的元素列表。

检查以下演示:

Fiddle Demo

堆栈示例

$(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>