更改之前是否有监听器可以执行输入复选框

Question

I am having a checkbox and I could perform some operations when the checkbox is clicked using onchange function. But, what I need is, I have to prompt a popup/warning like, If you click the checkbox, some irreversible change could happen. If the user clicks ok in the popup go on with the onchange function, else if the user clicks cancel, undo the change operation. Is there a way to do this?

Answer 1

var checkbox = document.getElementById('myCheckbox');

checkbox.addEventListener('change', firePrompt);

function firePrompt(e) {
  if (e.target.checked) {
    setTimeout(function() {
      var result = confirm('Proceed?');
      if (result) {
        alert('User said OK');
      } else {
        alert('User said no!');
        e.target.checked = false;
      }
    }, 5)
  }
}

I had to add a setTimeout as firePrompt was immediately fired and wouldn't display the tick until the User had either clicked OK or Cancel .

Here's a JSFiddle