JavaScript 在选中复选框时通过单击标签进行确认

javascript confirm when checking a checkbox by clicking on the label

本文关键字：标签 单击 确认 复选框 JavaScript      更新时间：2023-09-26

我在表单上有一个复选框，可以做一些危险的事情。 因此，我想确保用户在选中此项目时确实确定，但我不想警告他们是否取消选中复选框。

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

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>

一些注意事项：

  • 最好将事件侦听器添加到更改的元素（复选框），而不是其标签。
  • 最好听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>

相关文章：