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

本文介绍了如何在Javascript中检查多个复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚开始学习JavaScript，并遇到了一个问题，试图让多个复选框起作用。

我试图根据选中的选项来计算产品的成本。但是，我的脚本自动假定已经检查了所有的框。

这段代码有什么问题？

 函数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（您的总额是£+总额）; 
 
 $ b

HTML

 < html> 
< head> 
< title>基本定价脚本< / title> 
< / head> 
< body> 
< script src =script.js>< / script> 
 
< p>请从列表中选择您想要的选项< / p> 
 
< form name =priceoptions> 
 
< input type =checkboxid =1name =bigvalue =big>大型印刷品< br> 
< input type =checkboxid =2name =mediumvalue =medium>中等打印< br> 
< input type =checkboxid =3name =smallvalue =small>小型印刷品< br> 
< input type =submitid =buttonvalue =Submitonclick =cal（）> 
 
< / form> 
 
< / body> 
< / html>

解决方案

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

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

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

查看此片段。

 函数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>请从列表中选择您想要的选项< / p>< form name =priceoptions> < input type =checkboxid =1name =bigvalue =big>大型印刷品< br> < input type =checkboxid =2name =mediumvalue =medium>中等打印< br> < input type =checkboxid =3name =smallvalue =small>小型印刷品< br> < input type =submitid =buttonvalue =Submitonclick =cal（）>< / form>

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>

解决方案

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

这篇关于如何在Javascript中检查多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！