How do I display the number of selected items?

I've tried different ways to count the checkbox but it did not count the items when I click "select all".

I want to show the number of these items.

This is the code I am using.

This is the source of the code. https://www.freakyjolly.com/jquery-checkbox-list-select-unselect-all-with-indeterminate-master-check-example-tutorial/

HTML

<div >
  <div >
    <div >
      <ul >
        <li >
          <input
            
            type="checkbox"
            value="selectAll"
            id="masterCheck"
          />
          <label  for="masterCheck">
            Select / Unselect All
          </label>
        </li>
      </ul>
    </div>
    <div >
      <ul  id="list-wrapper">
        <li >
          <input
            
            type="checkbox"
            value="item1"
            id="item1"
          />
          <label  for="item1">
            Item 1
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item2"
            id="item2"
          />
          <label  for="item2">
            Item 2
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item3"
            id="item3"
          />
          <label  for="item3">
            Item 3
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item4"
            id="item4"
          />
          <label  for="item4">
            Item 4
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item5"
            id="item5"
          />
          <label  for="item5">
            Item 5
          </label>
        </li>
        <li  id="selected-values"></li>
      </ul>
    </div>
  </div>
</div>

jQuery

$(function() {
    // ID selector on Master Checkbox
    var masterCheck = $("#masterCheck");
    // ID selector on Items Container
    var listCheckItems = $("#list-wrapper :checkbox");

    // Click Event on Master Check
    masterCheck.on("click", function() {
      var isMasterChecked = $(this).is(":checked");
      listCheckItems.prop("checked", isMasterChecked);
      getSelectedItems();
    });

    // Change Event on each item checkbox
    listCheckItems.on("change", function() {
      // Total Checkboxes in list
      var totalItems = listCheckItems.length;
      // Total Checked Checkboxes in list
      var checkedItems = listCheckItems.filter(":checked").length;

      //If all are checked
      if (totalItems == checkedItems) {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", true);
      }
      // Not all but only some are checked
      else if (checkedItems > 0 && checkedItems < totalItems) {
        masterCheck.prop("indeterminate", true);
      }
      //If none is checked
      else {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", false);
      }
      getSelectedItems();
    });

    function getSelectedItems() {
      var getCheckedValues = [];
      getCheckedValues = [];
      listCheckItems.filter(":checked").each(function() {
        getCheckedValues.push($(this).val());
      });
      $("#selected-values").html(JSON.stringify(getCheckedValues));
    }
  });

CodePudding user response：

You can use simple getCheckedValues.length like:

$(function() {
    // ID selector on Master Checkbox
    var masterCheck = $("#masterCheck");
    // ID selector on Items Container
    var listCheckItems = $("#list-wrapper :checkbox");

    // Click Event on Master Check
    masterCheck.on("click", function() {
      var isMasterChecked = $(this).is(":checked");
      listCheckItems.prop("checked", isMasterChecked);
      getSelectedItems();
    });

    // Change Event on each item checkbox
    listCheckItems.on("change", function() {
      // Total Checkboxes in list
      var totalItems = listCheckItems.length;
      // Total Checked Checkboxes in list
      var checkedItems = listCheckItems.filter(":checked").length;

      //If all are checked
      if (totalItems == checkedItems) {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", true);
      }
      // Not all but only some are checked
      else if (checkedItems > 0 && checkedItems < totalItems) {
        masterCheck.prop("indeterminate", true);
      }
      //If none is checked
      else {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", false);
      }
      getSelectedItems();
    });

    function getSelectedItems() {
      var getCheckedValues = [];
      getCheckedValues = [];
      listCheckItems.filter(":checked").each(function() {
        getCheckedValues.push($(this).val());
      });
      $("#selected-values").html(JSON.stringify(getCheckedValues));
      $("#selected-number").html('<p>Number of element selected: '  getCheckedValues.length   '</p>');
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <ul >
        <li >
          <input
            
            type="checkbox"
            value="selectAll"
            id="masterCheck"
          />
          <label  for="masterCheck">
            Select / Unselect All
          </label>
        </li>
      </ul>
    </div>
    <div >
      <ul  id="list-wrapper">
        <li >
          <input
            
            type="checkbox"
            value="item1"
            id="item1"
          />
          <label  for="item1">
            Item 1
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item2"
            id="item2"
          />
          <label  for="item2">
            Item 2
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item3"
            id="item3"
          />
          <label  for="item3">
            Item 3
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item4"
            id="item4"
          />
          <label  for="item4">
            Item 4
          </label>
        </li>
        <li >
          <input
            
            type="checkbox"
            value="item5"
            id="item5"
          />
          <label  for="item5">
            Item 5
          </label>
        </li>
        <li  id="selected-values">[]</li>
        <li  id="selected-number">Number of element selected: 0</li>
      </ul>
    </div>
  </div>
</div>

Reference:

• Array.prototype.length