gpt4 book ai didi

javascript - 如何在 Javascript 中选中多个复选框

转载 作者:行者123 更新时间:2023-12-01 04:05:06 24 4
gpt4 key购买 nike

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

最佳答案

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

  • ==:按类型进行比较
  • === 按类型和值进行比较

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

看看这个片段。

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 - 如何在 Javascript 中选中多个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41900751/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com