如何检查列表框项目是否被选中？

Question

您好，我正在开发一个 asp.net 应用程序。我有一个列表框，其中包含数据库中的某些值。在列表框中，我有带有复选框的项目并选择所有选项。它基本上是多选列表框。我能够显示在警报框中选择的项目数。如果我选中全选，我可以使用长度属性显示项目数。每当我取消选中全选选项时，我都想显示 0，因为所有复选框都将被取消选中。我尝试了很多方法仍然无法正常工作。这是我的代码。 这些是参考。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

下面是我的javascript代码

$(function () {
          $('[id*=ddlvendors]').multiselect({
              includeSelectAllOption: true
          });
      });

这是我从列表框中查找所选项目的代码。

 $(".limitedNumbSelect2 option").each(function () {
                var val = $(this).val();
                var tempVal = $(".limitedNumbSelect2").val();

                if (tempVal.indexOf(val) >= 0 && selected.indexOf(val) < 0) {
                    selected.push(val);
                } else if (tempVal.indexOf(val) < 0 && selected.indexOf(val) >= 0) {
                    selected.splice(selected.indexOf(val), 1);
                }
            })
            alert(selected.length);

每当我取消选中选择所有我的警报都不会触发。我可以对此提出一些建议吗？谢谢大家。

Answer 1

我使用 vanilla JS 的解决方案是简单地监听 change-event，如果输入是否有 target.checked，则触发必要代码：https://jsfiddle.net/67dnnhva/

var allCheckboxes = document.querySelectorAll(".allcheckboxes input");
var checkAllElement = document.querySelector("#chkall");

checkAllElement.addEventListener("change", toggleSelectAll);

function toggleSelectAll(input) {
    if (input.target.checked) {
    allCheckboxes.forEach(function(input) {
        input.checked = true;
    });
  } else {
    allCheckboxes.forEach(function(input) {
      input.checked = false;
    });
    alert("hello");
  }
}