javascript - 复选框理货，选中/未选中的金额

Question

如何显示已选中复选框的数量？我需要显示一种已选中的复选框数量的统计，并让它为给定的组自动更新。如果我什至需要，我不知道如何设置数组的值来执行此操作。我还尝试使用 checked 属性，但这也不起作用。

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() 
}

Answer 1

您可以在父元素上放置一个 onchange 监听器，并在事件冒泡时处理该事件，而不是为每个复选框放置一个 onclick 监听器。

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>