javascript - 在 JavaScript 函数中使用时，HTML 复选框输入更改为类型 "true"或 "false"

Question

我正在尝试构建一个用于实验单元格大小的计算器，允许用户选择要包含的选项。为了返回单元格的数量/大小，我构建了一个 JavaScript 函数，该函数按输入标记上的名称字段计算选中项目的数量。

该函数似乎工作正常，但包含它会产生意想不到的结果，即将复选框转换为静态值字段，显示每个输入的值标签的内容(单个复选框的引用而不是系列)。

我想要(并且正在得到)这个:

相反，我目前得到的是:

代码如下。谢谢。

function updateresults() {
  var cb_counts = {};
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
    var ip = inputs[i];
    if (ip.type = 'checkbox' && ip.checked) {
      if (cb_counts[ip.name]) {
        cb_counts[ip.name] ++;
      } else {
        (cb_counts[ip.name] = 1);
      }
    }
  }
  var mincells = cb_counts["reltype"] * cb_counts["relqual"] * cb_counts["ask"] * cb_counts["cause"] * cb_counts["receff"] * cb_counts["retone"] * cb_counts["doneff"];
  document.getElementById("mc").innerHTML = mincells;
  var samplen = document.getElementById("samps").value;
  var percell = samplen / mincells;
  document.getElementById("pc").innerHTML = percell;
}

 <h1>Experimental Cell Size Calculator</h1>
<div name="metadata">
  Author: Nathaniel D. Porter
  <br>Revised: September 2, 2016
  <br>
  <em>Please contact the <a href="mailto://nathanield.porter@gmail.com">author</a> for permission to use or modify</em>
  <br>
</div>
<div name="directions">
  Check the boxes for each option to include in collection of the following experimental manipulations. Checking only one box effectively removes the manipulation so that all participants receive the checked version.
  <br>To calculate the cell size for a specific interaction, select the question names to interact. Checking all interactions shows the size of minimal cells. This will not change the option selections above. As you change the options, the output will automatically
  update below.
</div>
<div name="inputDiv">
  <p>
    Total Sample Size:
    <input type="number" name="samplesize" id="samps" value="1000" step="1">
  </p>
  <p>
    Relationship to Donor:
    <br>
    <input type="checkbox" name="reltype" value="Parent" checked>Parent
    <br>
    <input type="checkbox" name="reltype" value="Sibling">Sibling
    <br>
    <input type="checkbox" name="reltype" value="Aunt">Aunt
    <br>
    <input type="checkbox" name="reltype" value="Colleague">Co-worker
    <br>
  </p>
  <p>
    Quality of Relationship:
    <br>
    <input type="checkbox" name="relqual" value="Random">Random
    <br>
    <input type="checkbox" name="relqual" value="Important" checked>Important Matters
    <br>
  </p>
  <p>
    Type of discovery:
    <br>
    <input type="checkbox" name="ask" value="recAsk">Asked directly by recipient
    <br>
    <input type="checkbox" name="ask" value="heard" checked>Overheard through someone else
    <br>
  </p>
  <p>
    Implied cause of need:
    <br>
    <input type="checkbox" name="cause" value="none" checked>None stated
    <br>
    <input type="checkbox" name="cause" value="nofault">Genetic (no fault)
    <br>
    <input type="checkbox" name="cause" value="fault">Lifestyle (fault)
    <br>
  </p>
  <p>
    Stated effect on recipient:
    <br>
    <input type="checkbox" name="receff" value="longer" checked>Live longer
    <br>
    <input type="checkbox" name="receff" value="better">Live better
    <br>
  </p>
  <p>
    Tone of stated effect on recipient:
    <br>
    <input type="checkbox" name="retone" value="neg" checked>Prevent negative (not die/less pain)
    <br>
    <input type="checkbox" name="retone" value="pos">Enable positive (longer life/fuller life)
    <br>
  </p>
  <p>
    Stated effect on donor:
    <br>
    <input type="checkbox" name="doneff" value="none" checked>None given
    <br>
    <input type="checkbox" name="doneff" value="pos">Benefits
    <br>
    <input type="checkbox" name="doneff" value="neg">Costs
    <br>
    <input type="checkbox" name="doneff" value="both">Both
    <br>
  </p>
  Interaction of interest:
  <br>
  <input type="checkbox" name="interaction" value="reltype" checked>Relationship to Donor
  <br>
  <input type="checkbox" name="interaction" value="relqual" checked>Quality of Relationship
  <br>
  <input type="checkbox" name="interaction" value="ask" checked>Type of discovery
  <br>
  <input type="checkbox" name="interaction" value="cause" checked>Implied cause of need
  <br>
  <input type="checkbox" name="interaction" value="receff" checked>Stated effect on recipient
  <br>
  <input type="checkbox" name="interaction" value="retone" checked>Tone of stated effect on recipient
  <br>
  <input type="checkbox" name="interaction" value="doneff" checked>Stated effect on donor
  <br>
</div>
<div name="results">
  <p>
    Number of minimal cells:
    <p id="mc"></p>
    Minimal cell size:
    <p id="pc"></p>
    <br>Number of cells in interaction: Pending
    <br>Interacted cell size: Pending
</div>

Answer 1

这只是代码中的一个典型拼写错误:

if (ip.type = 'checkbox'  ...

就这样吧:

if (ip.type == 'checkbox' ...

必须注意的是，您的代码实际设置的是:

if (ip.type = ('checkbox' && ip.checked))

即:

if (ip.type = <boolean>)

即:无论 true 或 false，它对于 type 属性都是无效值，因此浏览器将其解释为默认输入类型 (TEXT)。