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>