Javascript：检测复选框是否选中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5561570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: detecting if checkbox checked not working
提问by NQQ
I've dug through all the tutorials and have been pulling my hair out trying to get this to work.
我已经翻阅了所有的教程，并一直在努力让它发挥作用。
The onClick fires properly, but it never makes it inside the IF loop where it checks if the checkbox has been checked.
onClick 正确触发，但它永远不会在 IF 循环中检查复选框是否已被选中。
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<script>
function updateTotal() {
document.orderform.total.value = 1*document.orderform.subtotal.value + 1*document.orderform.tax.value + 1*document.orderform.shipping.value;
}
**function applyDiscount(x) {
if (document.orderform.getElementById(x).checked == true) {
alert("Made it in if");
document.orderform.subtotal.value = .7*document.orderform.subtotal.value;
updateTotal();
}**
}
</script>
</header>
<body>
<section>
<h1>H1 here</h1>
<article>
<p>Article text here</p>
</article>
<form name="orderform" id="orderform" method="post" action="result.php">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="Enter First Name Here" />
<br />
<label for="subtotal">Subtotal</label>
<input type="text" name="subtotal" id="subtotal" value="10" onChange="updateTotal()"/>
<br />
<label for="shipping">Shipping</label>
<input type="text" name="shipping" id="shipping" value="2" onChange="updateTotal()"/>
<br />
<label for="tax">Tax</label>
<input type="text" name="tax" id="tax" value="1" onChange="updateTotal()" />
<br />
<label for="total">Total</label>
<input type="text" name="total" id="total" value="13" />
<br />
<label for="discountbox">Apply 30% discount</label>
<input type="checkbox" name="discountbox" id="discountbox" onClick="applyDiscount(this.id)"/>
<input type="submit" name="submit" />
</form>
</section>
<footer>
<p>Footer here</p>
</footer>
</body>
采纳答案by Mark Kahn
the issue is that you're document.orderformis your form and getElementByIdis on document.
问题是你document.orderform是你的表格并且getElementById在文件上。
You can either do:
你可以这样做：
document.getElementById(x).checked
document.getElementById(x).checked
or:
或者：
document.orderform.elements[x].checked
document.orderform.elements[x].checked
回答by Muhammad Akhtar
Can you try to put this condition
你能试着把这个条件
if (document.getElementById('discountbox').checked == true)
回答by Corey Sunwold
Try something a bit simpler:
尝试一些更简单的事情：
if (document.getElementById(x).checked)
回答by James Khoury
A couple of things were wrong:
有几件事是错误的：
- The should be in the tags.
- the line document.orderform.getElementById needed to be document.getElementById
- 应该在标签中。
- 行 document.orderform.getElementById 需要是 document.getElementById
this worked for me in chrome:
这在 chrome 中对我有用：
<!DOCTYPE html>
<html>
<head>
<script>
function updateTotal() {
document.orderform.total.value = 1 * document.orderform.subtotal.value + 1 * document.orderform.tax.value + 1 * document.orderform.shipping.value;
}
function applyDiscount(x) {
if (document.getElementById(x).checked == true) {
alert("Made it in if");
document.orderform.subtotal.value = .7 * document.orderform.subtotal.value;
updateTotal();
}
}
</script>
</head>
<body>
<header>
Header Goes here.
</header>
<section>
<h1>H1 here</h1>
<article>
<p>Article text here</p>
</article>
<form name="orderform" id="orderform" method="post" action="result.php">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="Enter First Name Here" />
<br />
<label for="subtotal">Subtotal</label>
<input type="text" name="subtotal" id="subtotal" value="10" onChange="updateTotal()"/>
<br />
<label for="shipping">Shipping</label>
<input type="text" name="shipping" id="shipping" value="2" onChange="updateTotal()"/>
<br />
<label for="tax">Tax</label>
<input type="text" name="tax" id="tax" value="1" onChange="updateTotal()" />
<br />
<label for="total">Total</label>
<input type="text" name="total" id="total" value="13" />
<br />
<label for="discountbox">Apply 30% discount</label>
<input type="checkbox" name="discountbox" id="discountbox" onClick="applyDiscount(this.id)"/>
<input type="submit" name="submit" />
</form>
</section>
<footer>
<p>Footer here</p>
</footer>
</body>
</html>
回答by willyp
I believe this is what you meant:
我相信这就是你的意思：
<script>
function updateTotal() {
document.getElementById("total").value = 1*document.getElementById("subtotal").value + 1*document.getElementById("tax").value + 1*document.getElementById("shipping").value;
}
function applyDiscount(x) {
if (document.getElementById(x).checked == true) {
document.getElementById("subtotal").value = .7 * document.getElementById("subtotal").value;
updateTotal();
}
}
