Как отобразить количество флажков, установленных на странице html? - PullRequest
Новая
       43

Как отобразить количество флажков, установленных на странице html?

1 голос
/ 07 августа 2020

Я хочу отобразить количество флажков, отмеченных в элементе 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>

Ответы [ 2 ]

0 голосов
/ 07 августа 2020

Вы должны добавить функцию изменения к типу флажка. Правильный код: 

$(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>
0 голосов
/ 07 августа 2020

Вы можете добавить прослушиватель событий для каждого и обновить количество проверенных входов на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...