Question

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

我的问题是，如果他们点击实际的复选框取消选中它，而不是标签的文字，这样可以正常工作。

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>

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

1 个答案: