javascript 通过单击标签来检查复选框时确认

Question

我的表单上有一个复选框会执行危险操作。因此，我想确保用户在选中此项目时确实确定，但如果他们取消选中该复选框，我不想警告他们。

我的问题是，如果他们单击实际的复选框来取消选中它，而不是标签的文本，则效果很好。

http://jsfiddle.net/j2ppzpdk/

function askApply() {
  if (document.getElementById("apply").checked) {
    var answer = confirm("Are you sure about that?");
    if (!answer) {
      document.getElementById("apply").checked = false;
    }
  }
}

<form>
  <label onclick="askApply();">
    <input type="checkbox" name="apply" id="apply" value="1" />&nbsp; Apply
  </label>
</form>

Answer 1

一些注意事项:

• 最好将事件监听器添加到发生更改的元素(复选框)，而不是其标签。
• 更好地监听change事件而不是click。例如，可以使用键盘更改复选框。
• 最好避免内联事件监听器。您可以改用 addEventListener。

document.getElementById('apply').addEventListener('change', function() {
  if(this.checked) {
    var answer = confirm("Are you sure about that?");
    if (!answer) {
      document.getElementById("apply").checked = false;
    }
  }
});

<form>
  <label>
    <input type="checkbox" name="apply" id="apply" value="1" />
    &nbsp; Apply
  </label>
</form>