切换复选框时如何获取复选框的数量

Question

我希望在切换复选框时选中多个复选框。下面提到的代码给出了未定义的输出。

的Javascript

$('[data-qtype="select-all"] input').on('click', function(){
    console.log($(this).prop( "checked" ).length);
});

HTML

<div class="survey-question" data-page-no="2" data-qtype="select-all" data-qnum="7" data-required="true" style="display: block;">
  <label>Question text...</label>
  <div class="radio-item">
    <input type="checkbox" name="q7" value="T" data-shell-qnum="16">option 1</div>
  <div class="radio-item">
    <input type="checkbox" name="q7" value="T" data-shell-qnum="17">option 2</div>
  <div class="radio-item">
    <input type="checkbox" name="q7" value="T" data-shell-qnum="18">option 3</div>
  <div class="radio-item">
    <input type="checkbox" name="q7" value="T" data-shell-qnum="19">option 4</div>
  <div class="radio-item">
    <input type="checkbox" name="q7" value="T" data-shell-qnum="20">option 5</div>
  <div class="radio-item">
    <input type="checkbox" name="q7" value="T" data-shell-qnum="21">option 6</div>
</div>

Answer 1

您可以使用$('input:checkbox:checked').length（或简称$('.radio-item :checked')）来获取检查复选框的数量，我强烈建议您使用change代替click复选框和单选按钮等元素：

$('[data-qtype="select-all"] input').on('change', function() {
  console.log($('.radio-item input:checkbox:checked').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="survey-question" data-page-no="2" data-qtype="select-all" data-qnum="7" data-required="true" style="display: block;"><label>Question text...</label>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="16">option 1</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="17">option 2</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="18">option 3</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="19">option 4</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="20">option 5</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="21">option 6</div>
</div>

更新

使用$(this)可以执行以下操作：

var counter = 0;
$('[data-qtype="select-all"] input').on('change', function() {
  ($(this).is(':checked')) ? counter++ : counter--;
  console.log(counter);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="survey-question" data-page-no="2" data-qtype="select-all" data-qnum="7" data-required="true" style="display: block;"><label>Question text...</label>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="16">option 1</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="17">option 2</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="18">option 3</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="19">option 4</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="20">option 5</div>
  <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="21">option 6</div>
</div>

Answer 2

修改

误解了OP的要求。编辑答案以正确解决问题。在Snippet中评论的详细信息。

<小时/> 我不是100％确定你想要检查所有复选框的确切位置，所以我添加了一个“主”复选框

<强>段

// Delegate click event on the [all] checkbox
$('[name="all"]').on('click', function() {

  // Then make each [q7] checkbox's proprty 'checked' true
  $('[name="q7"]').prop('checked', true);
});


/* Delegate the change event to form#survey
|| This will cover any and all change events 
|| triggered within the form
*/
$('#survey').on('change', function() {

  // Declare a counter
  var qty = 0;

  // each() checkbox...
  $('[name="q7"]').each(function(obj) {

      // if this is checked
      if ($(this).is(':checked')) {

        // Increment counter   
        qty++;
      } 


      // Display new count on output#qty 
      $('#qty').val(qty);
 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='survey'>
  <div class="survey-question" data-page-no="2" data-qtype="select-all" data-qnum="7" data-required="true" style="display: block;">
    <div class="all-item">
      <input type="checkbox" name="all" value="T" data-shell-qnum="0">Check All Options<br/>
      <label>Question text...</label>
    </div>
    <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="16">option 1</div>
    <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="17">option 2</div>
    <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="18">option 3</div>
    <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="19">option 4</div>
    <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="20">option 5</div>
    <div class="radio-item"><input type="checkbox" name="q7" value="T" data-shell-qnum="21">option 6</div>
  </div>
  <label for='qty'>
<output id='qty'></output>
</label>
</form>