为什么复选框未在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) }) 

工作演示