1

我想显示在 span 元素中勾选的复选框数量。我如何实现这一目标？这是我的代码 -

<script>
$(document).ready(function(){

var n =$("[type='checkbox']:checked").length;
$("span").text(n);

});
</script>
</head>
<body>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>
</body></html>
4

2 回答 2

0

您可以在每个上添加一个事件侦听器，并更新检查输入的数量change：

$(document).ready(function(){
     $.each($("[type='checkbox']"), inp => {
          $(this).on('change', getChecked)
     });
     function getChecked(){
          var n = $("[type='checkbox']:checked").length;
          $("span").text(n);
     }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>

于 2020-08-06T21:14:22.510 回答
0

您必须将更改功能添加到复选框类型。正确的代码是这样的：

$(document).ready(function(){
  $("[type='checkbox']").change(function () {
      var n =$("[type='checkbox']:checked").length;
      $('span').text(n); 
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">Red
<input type="checkbox">Green
<div id="result">
<p><span>0</span> are checked </p></div>

于 2020-08-06T21:16:15.000 回答