Question

我为统计列表创建了一个Java脚本。它完美地工作，直到我必须将它放入表中，因为它需要分成4列。现在，它将允许我单击框，但它将不再对复选框进行评分。有人可以告诉我为什么当我在表单中添加表格时会破坏我的javascript？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Toxic Test Quiz</title>




<link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/731cabbe-df4e-4566-ac88-f64a4500c6b6.css"/>

<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700,100italic,400italic,700italic"/>

<link href="styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>

</head>
<body>
<form>
   <table style="width: 880px;">
    <tr>
     <td>
       <input type=checkbox name=b1>Ammonium Hydroxide<br/><br>
       <input type=checkbox name=b3>2-Butoxyethanol<br/><br>
       <input type=checkbox name=b5>Di-(Palm Carboxyethyl)<br/><br>
       <input type=checkbox name=b7>Methoxydiglycol<br/><br>
       <input type=checkbox name=b9>Benzalkonium Chlorides<br/><br>
       <input type=checkbox name=b11>Phosphates<br/><br>
       <input type=checkbox name=b13>Silicon Compounds<br/><br>
     </td>


     <td>
       <input type=checkbox name=a1>Hydrozincite<br/><br>
    <input type=checkbox name=a3>Antifoam<br/><br>
    <input type=checkbox name=a5>Buffer<br/><br>
    <input type=checkbox name=a7>Glycol Ethers<br/><br>
    <input type=checkbox name=a9>Glutaral<br/><br>
    <input type=checkbox name=a11>Ethanolamine<br/><br>
    <input type=checkbox name=a13>Alumina<br/><br>
    </td>

    <td>
    <input type=checkbox name=a2>Polyacrylates<br/><br>
    <input type=checkbox name=a4>Polyethylene Glycol<br/><br>
    <input type=checkbox name=a6>Ethanolamine<br/><br>
    <input type=checkbox name=a8>Atrazine<br/><br>
    <input type=checkbox name=a10>Alcohol Ethoxylates <br/><br>
    <input type=checkbox name=a12>Petroleum<br/><br>
    <input type=checkbox name=a14>Polysorbate-20 <br/><br>
    </td>

    <td>
    <input type=checkbox name=b2>Sodium Tripolyphosphate<br/><br>
    <input type=checkbox name=b4>Myristalkonium Saccharinate<br/><br>
    <input type=checkbox name=b6>Alcohol Alkoxylates<br/><br>
    <input type=checkbox name=b8>Poloxamer 124 <br/><br>
    <input type=checkbox name=b10>Hexoxyethanol<br/><br>
    <input type=checkbox name=b12>Methylisothiazolinone<br/><br>
    <input type=checkbox name=b14>Triethanolamine<br/><br>
     </td>
    </tr>
</table>

<input type=button onclick="doIt(this.form)" value="SUBMIT">

<BR>YOUR FINAL HOUSEHOLD TOXICITY SCORE: <input size=2 type=text name=clicked value=0 onfocus=blur()>
</form>

<script>
function doIt(_f)
{
  var _countCK=0;
  var _countTL=0;
  for(var _obj = _f.firstChild; _obj ; _obj=_obj.nextSibling)
  {
    if(_obj.name!=undefined)
    {
      if(_obj.type=="checkbox")
      {
        _countTL++;
        if(_obj.checked)
          _countCK++;
      }
    }
  }
  _f.clicked.value=_countCK;
  _f.notclicked.value=0+_countTL-_countCK;
}
</script>

</body>
</html>

Answer 1

如果我理解正确，doIt（_f）中的变量_f就是表格。

如果这是正确的，问题是现在将复选框包装在表中会使_f.firstChild返回表格而不是复选框。

作为替代方案，请尝试这个更通用的doIt（_f），它应该在您的复选框上为零：

function doIt(_f)
{
    var _countCK=0;
    var _countTL=0;
    //get all the input types...new way
    var cboxarr = _f.getElementsByTagName('input');
    for(var i=0;i<cboxarr.length;i++)
    {
        //declare your _obj variable as the particular elements...rest the same
        var _obj = cboxarr[i];
        if(_obj.name!=undefined)
        {
          if(_obj.type=="checkbox")
          {
            _countTL++;
            if(_obj.checked)
              _countCK++;
          }
        }
    }
    _f.clicked.value=_countCK;
    _f.notclicked.value=0+_countTL-_countCK;
}

我在chrome中试过这个，它确实有用。

将表添加到html后，Javascript失败

1 个答案: