Question

我刚开始学习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>

Answer 1

您的比较不正确。单个“=”不是比较您需要“==”表示真实和“===”完全匹配的正确方法。将其更改为

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

Answer 2

=是赋值运算符。要进行比较，您需要使用==或===。

==：按类型
===按类型和值进行比较

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

查看此代码段。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 3

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

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

如果符合以下条件，您也可以简化：

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

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

3 个答案: