如果复选框被选中，立即提醒

Question

所以，我的目标是：如果用户选中了该复选框，则执行某些操作（假设只是一个警报）。这是我的代码，它不起作用：

function validate() {
    if (document.getElementById('LetterNeed').checked) {
        alert("checked");
    } else {
        alert("You didn't check it! Let me check it for you.");
    }
}    

<input type="checkbox" name="LetterNeed" id="LetterNeed">Not important</span>

感谢您的帮助！

Answer 1

旧方法

在<input>中调用validate()函数 标签

function validate() {
    if (document.getElementById('LetterNeed').checked) {
        alert("checked");
    } else {
        alert("You didn't check it! Let me check it for you.");
    }
}

<input type="checkbox" name="LetterNeed" id="LetterNeed" onclick="validate()">Not important</span>

事件处理方式

function validate() {
  if (this.checked) {
    alert("checked");
  } else {
    alert("You didn't check it! Let me check it for you.");
  }
}

document.getElementById('LetterNeed').addEventListener('click', validate);

<input type="checkbox" name="LetterNeed" id="LetterNeed"><span>Not important</span>

Answer 2

在复选框状态 change 上调用 validate 函数。

<input type="checkbox" name="LetterNeed" id="LetterNeed" onchange="return validate()">Not important</span>
//                                                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

或

document.getElementById('LetterNeed').addEventListener('change', validate);

DEMO

Answer 3

另一方面，您可以在 DOMContentLoaded 上添加 eventlistener，如下所示：

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#LetterNeed').addEventListener('change', validate);
});

validate

的函数

function validate(e){
     if(e.target.checked)
     { 
        alert("Checked"); 
     } 
     else{ 
        alert("Not checked"); 
     } 
}

Answer 4

试试这些改变：

function validate(aCheckBox) {
  if (aCheckBox.checked) {
    alert("checked");
  } else {
    alert("You didn't check it! Let me check it for you.");
  }
}    

<input type="checkbox" name="LetterNeed" id="LetterNeed" onclick="validate(this)">Not important</input>

如果复选框被选中，立即提醒

If checkbox checked, instantly alert

html

javascript

event-handling