為什么復選框未在jquery中取消選中或單擊事件未觸發？

Question

您能否告訴我，為什么在jquery或click事件中未取消選中復選框，而不觸發？

我的演示中有一個復選框。用戶可以取消選中此復選框，但無法取消選中此復選框。這是我的代碼

https://jsbin.com/lohaleleba/edit?html,css,js，輸出

 $(function() { function signUpAgreeCheckedEventHandler(e) { e.preventDefault(); e.stopPropagation(); alert('--') } $('#signUpAgree_js').click(signUpAgreeCheckedEventHandler) }) 

 #toi-login .form ul li { list-style: none; margin-bottom: 22px; } #toi-login .checkbox { display: block; margin: 0 0 12px; } #toi-login p { font-size: 14px; line-height: 18px; color: #222; } * { margin: 0; padding: 0; box-sizing: border-box; } #toi-login .checkbox input[type="checkbox"] { display: none; } #toi-login input { display: block; width: 100%; line-height: normal; border: 0; font-size: 14px; } #toi-login .checkbox label:before { content: ""; position: absolute; left: 0px; top: 2px; height: 14px; width: 14px; line-height: 15px; background: #ffffff no-repeat; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border: 1px solid #b1b1b1; border-radius: 2px; } #toi-login .checkbox input[type="checkbox"]:checked+label:before { background: #3696de; border-color: #3696de; } #toi-login .checkbox input[type="checkbox"]:checked+label:after { position: absolute; content: ''; border: solid #fff; width: 5px; height: 10px; left: 4px; top: 3px; border-width: 0 2px 2px 0; transform: rotate(45deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="toi-login"> <form class="form" action="#" autocomplete="off"> <ul> <li class="checkbox"> <p> <input type="checkbox" checked="true" id="signUpAgree_js"> <label for="agree">I agree with the <a href="#"> Terms &amp; Conditions </a>and <a href="#"> Privacy Policy</a> of Times of India</label> </p> </li> </ul> </form> </div> 

您能告訴我如何取消選中或切換此字段嗎

Answer 1

只需要修正標簽for屬性。 for屬性確定與之關聯的input ，在這種情況下，需要提供signUpAgree_js的ID。

 $(function() { function signUpAgreeCheckedEventHandler(e) { alert('--') } $('#signUpAgree_js').change(signUpAgreeCheckedEventHandler) }) 

 #toi-login .form ul li { list-style: none; margin-bottom: 22px; } #toi-login .checkbox { display: block; margin: 0 0 12px; } #toi-login p { font-size: 14px; line-height: 18px; color: #222; } * { margin: 0; padding: 0; box-sizing: border-box; } #toi-login .checkbox input[type="checkbox"] { display: none; } #toi-login input { display: block; width: 100%; line-height: normal; border: 0; font-size: 14px; } #toi-login .checkbox label:before { content: ""; position: absolute; left: 0px; top: 2px; height: 14px; width: 14px; line-height: 15px; background: #ffffff no-repeat; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border: 1px solid #b1b1b1; border-radius: 2px; } #toi-login .checkbox input[type="checkbox"]:checked+label:before { background: #3696de; border-color: #3696de; } #toi-login .checkbox input[type="checkbox"]:checked+label:after { position: absolute; content: ''; border: solid #fff; width: 5px; height: 10px; left: 4px; top: 3px; border-width: 0 2px 2px 0; transform: rotate(45deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="toi-login"> <form class="form" action="#" autocomplete="off"> <ul> <li class="checkbox"> <p> <input type="checkbox" checked id="signUpAgree_js"> <label for="signUpAgree_js">I agree with the <a href="#"> Terms &amp; Conditions </a>and <a href="#"> Privacy Policy</a> of Times of India</label> </p> </li> </ul> </form> </div> 

Answer 2

您需要修復2個問題。

1. 標簽for屬性必須參考輸入ID。 在這種情況下，它應該是signUpAgree_js而不是agree 。

    <label for="signUpAgree_js"> I agree with the <a href="#"> Terms &amp; Conditions </a> and <a href="#"> Privacy Policy</a> of Times of India </label> 

2. 它必須是change事件，而不是click事件。

    $(function(){ function signUpAgreeCheckedEventHandler(e) { e.preventDefault(); e.stopPropagation(); alert('--') } $('#signUpAgree_js').change(signUpAgreeCheckedEventHandler) }) 

工作演示