How to get number of checkboxes checked when checkbox is toggled

Question

I would like to to get number of checkboxes checked when the checkbox is toggled. The code mentioned below is giving undefined output.

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

EDIT

Misunderstood OP's request. Edited answer to correctly resolve issue. Details commented in Snippet.

---

I'm not 100% sure how exactly you wanted all of your checkboxes checked, so I added a "master" checkbox

SNIPPET

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

Answer 2

You can use $('input:checkbox:checked').length(or simply $('.radio-item :checked')) to get number of how many checkboxes are checked, and I strongly recommend you to use change instead of click for elements like checkboxes and radio buttons:

$('[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>

Update:

Using $(this) you can do something like 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>