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

堆叠示例

＆＃13;

$(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);
    }
  })
})

＆＃13;

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

＆＃13;

Answer 2

检查所选console的{{1}}。

checkboxes

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

Answer 3

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

<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);
 });
}

从下拉列表中选择复选框

3 个答案: