如何计算使用数组选中的复选框的数量

Question

我正在尝试使用数组中的信息来获取选中的复选框的数量，但我一直未定义。对于这个项目，我必须使用一个数组、一个开关，并且必须在 JavaScript 中。我不能使用任何其他编程语言。

如何让我的函数正确添加选中的框？我也不确定如何实现此功能的切换。+

请帮忙，我已经为此工作了大约 4 个小时，到处搜索以找到有用的答案。

我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Project</title>
</head>
<body>

<form id="frmCareer" method="get" action="prjFormEvent.js">
<table id="tblCareer">

<th>Directions: Check of the items you think you would enjoy in each section.<br /> Mark as many items that apply.</th>

<tr><td><strong><label id="lblRealistic">
"R" Section</label></strong>
<div id="realisticTotal"></div>
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic1">Repair a car
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic2">Do wood working
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic3">Refinish furniture
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic4">Explore a forest
<br />
</tr></td>

      </table><!--End of tblWhichCareer-->
   </form><!--End of frmWhichCareer-->

</body>
</html>

我的JavaScript

Global Variables
var getCareer = new Array();
getCareer["chkRealistic1"] = 1;
getCareer["chkRealistic2"] = 1;
getCareer["chkRealistic3"] = 1;
getCareer["chkRealistic4"] = 1;

function getRealistic()
{
    var rTotal = 0;
    var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];

    rTotal = getCareer[selectedRealistic.value]

    document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
}//End of function getRealisticCareer()

Answer 1

尝试使用：

document.getElementById("lblRealistic").innerHTML =  document.querySelectorAll('input[name="chkRealistic"]:checked').length + "/9 Checked";

Answer 2

试试这个：

function getRealistic()
{
var rTotal = 0;

for(i=0; i<document.forms[0].chkRealistic.length; i++){
    if(document.forms[0].chkRealistic.item(i).checked){
        rTotal++;
    }
}

document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
}

Answer 3

你错过了这一行

var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];

returns 一个名为 chkRealistic 的复选框数组（在您的示例中，所有四个）。

不应将 getCareer 函数的结果分配给 rTotal，您应该遍历 [=21= 中的 HTMLInput 数组]selectedRealistic 检查 .checked 属性.

var rTotal = 0;
var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];

for (var sel = 0; sel < selectedRealistic.length; sel++)
{
  if (selectedRealistic[sel].checked)
        rTotal += getCareer[selectedRealistic[sel].value]
}

document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"

您可以在此处查看运行示例：http://codepen.io/pabloapa/pen/jPNPNg

Answer 4

这里也可以在 Plunker 上试试这个：http://plnkr.co/edit/085ZtojBgvumktHwQSGf?p=preview

<form id="frmCareer" method="get" action="prjFormEvent.js">
    <table id="tblCareer">
      <tr>
        <th>Directions: Check of the items you think you would enjoy in each section.
          <br />Mark as many items that apply.</th>
      </tr>
      <tr>
        <td><strong><label id="lblRealistic">
"R" Section</label></strong>
          <div id="realisticTotal"></div>
          <br />
          <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic1">Repair a car
          <br />
          <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic2">Do wood working
          <br />
          <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic3">Refinish furniture
          <br />
          <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic4">Explore a forest
          <br />
        </td>
      </tr>


    </table>
    <!--End of tblWhichCareer-->
  </form>
  <!--End of frmWhichCareer-->
  <script language="JavaScript">
    var getCareer = new Array();
    getCareer["chkRealistic1"] = 0;
    getCareer["chkRealistic2"] = 0;
    getCareer["chkRealistic3"] = 0;
    getCareer["chkRealistic4"] = 0;

    function getRealistic(cbox) {
      var rTotal = 0;
      var key = cbox.value;
      getCareer[key] = cbox.checked ? 1 : 0;

      for (var key in getCareer) {
        rTotal += getCareer[key];

      }

      document.getElementById("lblRealistic").innerHTML = rTotal + "/9 Checked"
    } //End of function getRealisticCareer()
  </script>

如何计算使用数组选中的复选框的数量

How to count the number of checkboxes checked using an array

javascript

arrays

checkbox