如何在Javascript中检查多个复选框答案

【问题标题】：How to check multiple checkboxes in Javascript如何在Javascript中检查多个复选框
【发布时间】：2017-06-13 12:50:38
【问题描述】：

我刚刚开始学习 JavaScript，但在尝试让多个复选框工作时遇到了问题。

我正在尝试根据选中的选项计算产品成本。但是，我的脚本会自动假设所有框都已被选中。

这段代码有什么问题？对不起，如果这是一个基本问题，但我已经敲了几个小时了。

function cal() {

    var selectionOne = 0;
    var selectionTwo = 0;
    var selectionThree = 0;
    var total = 0;


    if (document.getElementById("1").checked = true ){
        selectionOne = 25;
    }

    if (document.getElementById("2").checked = true ){
        selectionTwo = 50;
    }

    if (document.getElementById("3").checked = true ){
        selectionThree = 100;
    }

    total = selectionOne + selectionTwo + selectionThree;

    alert ("Your total is £" + total);

}

HTML

<html>
  <head>
    <title>Basic Pricing Script</title>
  </head>
  <body>
    <script src="script.js"></script>

    <p>Please select which options you want from the list</p>

    <form name="priceoptions">

      <input type="checkbox" id="1" name="big" value="big"> Big Prints<br>
      <input type="checkbox" id="2" name="medium" value="medium" > Medium Prints<br>
      <input type="checkbox" id="3" name="small" value="small"  > Small Prints<br>
      <input type="submit" id="button" value="Submit" onclick="cal()">

    </form>

  </body>
</html>

【问题讨论】：

在“if”语句中，您需要两个相等的符号来比较是否相等，而不仅仅是一个。 document.getElementById("1").checked == true.
不需要== true 部分。而这一切都可以浓缩。看看我的回答

标签： javascript html forms checkbox input

【解决方案1】：

= 是赋值运算符。为了比较，你需要使用==或===。

==：这是按类型比较的
=== 按类型和值进行比较

另外，说.checked == true 是多余的。你可以使用.checked。此外，没有理由声明变量，然后在单独的行上设置它们的值。您可以使用三元运算符来减少代码。

看看这个sn-p。

function cal() {
    var s1 = document.getElementById("1").checked ? 25 : 0;
    var s2 = document.getElementById("2").checked ? 50 : 0;
    var s3 = document.getElementById("3").checked ? 100 : 0;
    var total = s1 + s2 + s3;
    alert ("Your total is £" + total);
}

<p>Please select which options you want from the list</p>

<form name="priceoptions">
  <input type="checkbox" id="1" name="big" value="big"> Big Prints<br>
  <input type="checkbox" id="2" name="medium" value="medium" > Medium Prints<br>
  <input type="checkbox" id="3" name="small" value="small"  > Small Prints<br>
  <input type="submit" id="button" value="Submit" onclick="cal()">
</form>

【讨论】：

使用== 和=== 有什么区别？ :)（我知道，但其他人可能不知道）
好的，这很有趣。如果没有检查，您将如何检查？我也可以通过使用在检查和未检查之间设置变量值：这看起来好多了
developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

【解决方案2】：

您的比较不正确。单个“=”不是比较您需要的值的正确方法，“==”表示真实，“===”表示完全匹配。改成

if (document.getElementById("1").checked == true ){
    selectionOne = 25;    
}

【讨论】：

天哪，我太傻了，居然不记得这个！对不起，这样的菜鸟问题！在这里使用 === 而不是 == 会有什么好处吗？

【解决方案3】：

如果您需要在 JavaScript 中比较两个值，则必须使用 == 或 === 运算符：

if (document.getElementById("1").checked == true ){

如果满足以下条件，您也可以简化：

if (document.getElementById("1").checked){

【讨论】：