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>