javascript通过单击标签确认选中复选框

Question

I have a checkbox on a form that does something dangerous. So, I want to make sure the user is really sure when they check this item, but I don't want to warn them if they're unchecking the checkbox.

My issue is this works fine if they click on the actual checkbox to uncheck it, but not the text of the label.

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

Some notes:

• Better add the event listener to the element that changes (the checkbox), not its label.
• Better listen to change event instead of click . For example, the checkbox could be changed using the keyboard.
• Better avoid inline event listeners. You can use addEventListener instead.

 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>