Javascript方法不起作用-复选框[关闭]答案

【问题标题】：Javascript Method Not Working - Checkbox [closed]Javascript方法不起作用-复选框[关闭]
【发布时间】：2014-11-13 05:38:27
【问题描述】：

早安，

我很难弄清楚为什么下面的 Javascript 方法不起作用。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!--Author: Alejandro Deguzman Jr-->

<html>
<head>

<title>Realtor Inquiry</title>

<script type="text/javascript">

/* <![CDATA[ */
function termAgreed() {
    if (document.getElementByID.checked == true) {
        window.alert("Works!");
        }
}
/* ]]> */

</script>

</head>

 <body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
</body>
</html>

我试图用上面的代码完成的是，当复选框被选中时，会出现一个提示。我不知道如何搜索我正在寻找的这个特定答案。

【问题讨论】：

你在这段代码的什么地方调用了 termAgreed() 方法？
我想我是在正文中调用这个方法。好吧，至少这是我希望激活该方法的地方。当复选框被选中时，将出现提示。
我在这里看不到任何将复选框与该功能相关联的内容。我建议你阅读onclick events。

标签： javascript html forms checkbox methods

【解决方案1】：

1) 如上所述，您需要在HTML 中调用您的函数。使用onchange() 并在复选框更改时调用函数。

2)您需要更正选择元素的语法。它的Id 不是ID 并且还传递了您要选择的element 的ID。

function termAgreed() {
if (document.getElementById("agree").checked == true) {
window.alert("Works!");
}
}

&lt;input type="checkbox" id="agree" onchange="termAgreed()" value="Terms" checked="unchecked"&gt;Agree with the Terms &amp; Conditions

【讨论】：

太棒了，完全符合我的要求。
请标记答案。

【解决方案2】：

我稍微修改了你的termAgreed。请注意querySelector 在older browsers 中不可用。我在最后添加了一部分，将change 事件添加到复选框：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!--Author: Alejandro Deguzman Jr-->

<html>
<head>

<title>Realtor Inquiry</title>

<script type="text/javascript">

/* <![CDATA[ */
function termAgreed() {
    if (document.querySelector('#agree').checked) {
        window.alert("Works!");
        }
}
/* ]]> */

</script>

</head>

 <body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
<script type="text/javascript">
document.querySelector('#agree').addEventListener('change', termAgreed);
</script>
</body>
</html>

【讨论】：

我明白了，这似乎是一种更高级的使用事件处理程序的方法？我对 JQuery 还不熟悉。
这里没有 jQuery。如果您开始使用更多 JavaScript，我建议您研究一下。虽然可能不适合您的使用，但通过 JavaScript 添加事件处理程序（我所做的）在您向页面添加更多 JavaScript 时更易于维护。它也被普遍接受为best practice（和here，例如，参见底部兼容性后的注释）。

【解决方案3】：

首先，您没有正确使用 getElementById。您需要传入要查找的元素。像这样，getElementById("agree")。正如其他人已经在 cmets 中发布的那样，您没有在代码中调用“termAgreed”。

【讨论】：

我才意识到这一点。我忘记输入复选框 ID。我将如何在我的表单中调用该方法？我应该使用 onClick 吗？我只想在选中复选框后激活该方法。
考虑为此使用 jQuery。为复选框创建一个单击事件，查看它是否已“选中”，然后根据该检查执行警报。这是小提琴 -> jsfiddle.net/5o6h4g8o
对不起，我还不熟悉 JQuery。我仍在尝试围绕 Javascript 进行思考。
@killQuotes：在将其发布为 asnwer 之前，您是否尝试过 getElementByID("agree") 这行代码？
@Syed，不，我没有，但我看到这是我的错字。抱歉，我修好了。