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"];

返回一个名为 chkRealistic 的复选框数组（在您的示例中，全部四个）。

您应该在 selectedRealistic 中迭代HTMLInput数组，而不是将 getCareer 函数的结果分配给 rTotal 。 已检查属性。

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>

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

4 个答案: