Question

我只是试图获取一个检查框的结果的警报。我似乎无法隔离检查事件。我加载页面时会触发，尽管我最初尝试将check属性设置为false。

抬起头来让我得到jquery和所有这些东西，但是对于我在javascript中的正式训练，我需要坚持使用javascript并首先得到它（jquery将是我的下一个课程）。

这是代码：

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

<html lang="en">
  <head>
    <title>JavaScript Challenges</title>
    <script type="text/javascript">
    window.onload = function(){
   checkbox = document.getElementById("subscribe");
 checkbox.checked = false;


 if (checkbox.checked = true){
    alert("checked works");
    }

}

    </script>
  </head>
  <body>
    <form action="">
      <fieldset>

        <legend>Email subscriptions</legend>

        <p id="subscribepara">
          <label>
            <input type="checkbox" name="subscribe" id="subscribe">
            Yes! I would like to receive the occasional newsletter via email.
          </label>
        </p>

        <p id="emailpara">
          <label>
            Email Address:
            <input type="text" name="email" id="email">
          </label>
        </p>

      </fieldset>
    </form>
  </body>
</html>

这是来自wikiversity btw的javascript挑战。第一个挑战的第二部分。你需要的第一部分用style.display ='none'隐藏电子邮件元素工作正常。

Answer 1

它似乎正在触发，因为比较运算符已被破坏：

if (checkbox.checked = true)

应该是

if (checkbox.checked == true)

您拥有的版本实际上是将选中状态设置为true。此操作成功，因此本身解析为true（导致输入条件并看到警报）。

此外，当您手动选中/取消选中该复选框时，此代码不会触发。当页面加载时，它只运行一次。绑定到点击事件的一种方法是specify a function call in the markup复选框。

考虑更好的设计不是在标记中进行，而是将代码分离并在外部绑定到事件。但是当你进入jQuery时，你会深入研究它。从基础开始很好。

Answer 2

如果您希望在选中复选框后触发事件，则不应将其绑定到window.onload，而应将其绑定到复选框的onchange事件：

<script>
    var checkbox = document.getElementById('subscribe');
    checkbox.onchange = function() {
        if (checkbox.checked = true){
            alert("checked works");
        }
    }
</script>

请注意，onchange事件对于Internet Explorer的工作方式与其他浏览器的工作方式不同。这是一个完全不同的主题，因此如果您想了解更多相关信息，请查看this question。

还要注意，上面的函数应该定义在实际的输入元素下面。如果您在<head>中包含此示例，则它还不知道ID为subscribe的元素的存在，并且JavaScript将失败。 更好，更灵活的替代方法是在DOM加载后绑定事件处理程序，但为了简洁起见，如果您想了解更多信息，我建议您在此主题上搜索SO或Google：）< / p>

Answer 3

我认为你的方法略有偏离 - 重要的是，你现在还没有真正捕捉/处理事件。目前，当页面加载时，您会查看复选框的已选中状态，可能会启动警报。我对该要求的理解是，当复选框更改进行检查时，您会弹出警告。

（正如大卫所指出的，当你执行检查时，你实际上是在无意中检查了复选框。）

您要做的是为复选框的onchange事件注册一个监听器，每次复选框更改时都会执行一些代码。既然听起来你想要学习这个，我会把它留在那里，而不是给出一些确切的代码。如果你想更深入地阅读有关内容和方法的内容，请看一下这个introduction to event handlers（请注意，这个特定情况需要更多参与）。

Answer 4

为了通过选中复选框的操作来调用函数，您需要向复选框添加事件侦听器。这是如何做到的：

// you have to do it inside the window.onload function so you know the DOM is available
window.onload = function(){
var checkbox = document.getElementById("subscribe");
checkbox.onchange = function(){
  if(checkbox.checked == true){
    alert('checked!');
  }
};
};

“onchange”属性设置为一个函数，每次复选框从更改状态更改为未选中状态时都会调用该函数，反之亦然。在该函数内部，我们检查checked的值并在适当时启动警报。

希望有所帮助！

Answer 5

检查您的comparison，checkbox.checked = true是一项作业。研究onClick event

由于这基本上是家庭作业，我不会发布工作代码。你很亲密，读完之后你会得到它。

Answer 6

您可以使用一个函数并通过onclick事件触发它。这样你就可以在其他复选框上重复使用它。

# js
function alert_on_checked(elementId) {
  var checkbox = document.getElementById(elementId);
  if(checkbox.checked) {
    alert('checked works!');
  }
}

# html
...
<input type="checkbox" name="subscribe" id="subscribe" onclick="alert_on_checked(this.id)" >
...

javascript复选框基本

6 个答案: