CODEWITHSUNDEEP
javascripthtml
CV88
CV88

Reputation: 87

Check Box tally, amount checked/unchecked

How do you display the number of check boxes that have been checked? I need to display a sort of tally of the amount of check boxes that are checked and have it updated automatically for a given group. I don't know what to set the value of arrays to do this if I even need that. I also attempted to use the checked attribute but that's not working either.

var infoArray = new Array();

function userSelection(userInput) {
  var itemName = userInput.name;
  var itemName2 = userInput.value;

  switch (itemName) {
    case "sectionR":
      {
        switch (itemName2) {
          case "repair car":
            infoArray[0] = 1;
            break;

          case "wood work":
            infoArray[0] = 1;
            break;

          case "explore forest":
            infoArray[0] = 1;
            //end of case "sectionR"
        }
        //end of sub switch
      }
      break;

    case "sectionA":
      {
        switch (itemName2) {
          case "clothing design":
            infoArray[1] = 1;
            break;

          case "public singing":
            infoArray[1] = 1;
            break;

          case "decorate":
            infoArray[1] = 1;
            //end of sub switch
        }
        // end of case sectionA
      }
      //end of main switch
  }
  var userOutput = new Array();
  for (var i = 0; i < itemName.length; i++) {
    userOutput.push(itemName[i].checked);
  }

  document.getElementById("selectionTotal").innerHTML = "R SECTION" + "&nbsp" + "," + "&nbspA SECTION" + "<br>" +
    infoArray;

  //end of userSelection() 
}

Upvotes: 3

Views: 474

Answers (2)

dting
dting

Reputation: 39287

Instead of putting an onclick listener to each checkbox, you can put a onchange listener on the parent element and when the event bubbles up, handle the event.

function update() { 
  document.getElementById('count').innerHTML =
      document.querySelectorAll('#checkboxes input[type="checkbox"]:checked').length
}
<div id='checkboxes' onchange='update()'>
  <input type='checkbox'>A
  <input type='checkbox'>B
  <input type='checkbox'>C
  <input type='checkbox'>D
</div>
<div id='count'></div>

Upvotes: 2

Tim Mullen
Tim Mullen

Reputation: 624

It would be helpful to see your HTML, but you should be able to use document.querySelectorAll("input:checked").length to get the length of a NodeList containing all of the checked input elements.

Here is a quick example of how it works:

function checkThis() {
    var numberChecked = document.querySelectorAll('input:checked').length;
    document.getElementById('counter').innerHTML = "Number of checked boxes: " + numberChecked;
}
<form>
    <input type="checkbox" name="checkthis" onclick="checkThis()" />
    <br />
    <input type="checkbox" name="checkthis" onclick="checkThis()" />
    <br />
    <input type="checkbox" name="checkthis" onclick="checkThis()" />
    <br />
    <input type="checkbox" name="checkthis" onclick="checkThis()" />
    <br />
    <input type="checkbox" name="checkthis" onclick="checkThis()" />
    <br />
    <input type="checkbox" name="checkthis" onclick="checkThis()" />
    <br />
    <input type="checkbox" name="checkthis" onclick="checkThis()" />
    <br />
    <p id="counter">Number of checked boxes: 0</p>
</form>

If you need to target specific checkboxes, you can just get more specific in your selector by adding a class or ID (input#id:checked).

Upvotes: 1

Related Questions