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

Get selected checkboxes from a dropdown

本文关键字：复选框 获取 下拉列表      更新时间：2023-09-26

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

代码：

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

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

检查以下演示：

Fiddle演示

堆栈示例

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

检查所选checkboxes的console。

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

尝试一下，它会在您选择任何复选框时返回所有选中的复选框值：

<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);
 });
}
相关文章：