Bootstrap Checbox模式不起作用

Question

选中复选框时，引导模式复选框不起作用。

条件是当用户单击复选框时应显示引导程序模式弹出窗口

Bootstrap版本3.3.6

jQuery版本2.1.3

 $(function() { $('#tos-checkbox').click(function() { if ($('#tos-checkbox').is(":checked")) { $('#tosmodal').modal('show'); }else { $('#tosmodal').modal('hide'); } }); }); 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <input id="tos-checkbox" type="checkbox"> <span>I agree to the Terms And Conditions.</span> <div class="modal fade" id="tosmodal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" >&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button> </div> </div> </div> </div> </div> 

Answer 1

更改JQuery的顺序。 将JQuery放在第一位

 $(function() { $('#tos-checkbox').click(function() { if ($('#tos-checkbox').is(":checked")) { $('#tosmodal').modal('show'); }else { $('#tosmodal').modal('hide'); } }); }); 

  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <input id="tos-checkbox" type="checkbox"> <span>I agree to the Terms And Conditions.</span> <div class="modal fade" id="tosmodal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" >&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button> </div> </div> </div> </div> </div> 

Answer 2

要使用bootstrap.js，需要JQUERY。 您需要重新排列调用bootstrap和jquery的顺序的原因是， 需要在bootstrap.js之前先调用jquery 。 您的问题已得到回答。 我只想参加解释。 希望能帮助到你。