可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've just started to learn JavaScript and have run into a issue trying to get multiple checkboxes to work.

I am trying to calculate the cost of a product based on the options checked. However, my script is automatically assuming that all the boxes have been checked.

What is wrong with this code? Sorry if its a basic question but I have been banging my head for hours now.

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>

回答1:

= is the assignment operator. For comparisons, you need to use == or ===.

==: This compares by type
=== This compares by type and value

Also, saying .checked == true is redundant. You can just use .checked. Furthermore, there is no reason to declare the variables, and then set their values on seperate lines. You can reduce the code by using the ternary operator.

Check out this snippet.

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>

回答2:

Your comparisons are not correct. A single "=" is not the correct way to compare values you need "==" for truthy and "===" for an exact match. Change it to

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

回答3:

If you need to compare two values in JavaScript you have to use == or === operators:

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

also you can simplify this if:

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

How to check multiple checkboxes in Javascript

问题:

回答1:

回答2:

回答3:

收藏的人(0)

How to check multiple checkboxes in Javascript

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮