Javascript:检测是否选中复选框不工作

Javascript: detecting if checkbox checked not working

本文关键字：复选框 工作 检测 是否 Javascript      更新时间：2023-09-26

我已经翻遍了所有的教程，一直在绞尽脑汁想让这个工作。

onClick正确触发，但它永远不会进入IF循环，在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>

你能试着把这个条件

if (document.getElementById('discountbox').checked == true)

问题是你的document.orderform是你的表单，getElementById是文档。

你可以做:

document.getElementById(x).checked

或:

document.orderform.elements[x].checked

试试简单一点的:

if (document.getElementById(x).checked)

有几个地方不对:

  1. 行document.orderform.getElementById需要是document.getElementById

这对我在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>

我相信这就是你的意思:

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

相关文章：