<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:0;} .box_agreement{ text-align: center; } </style> </head> <body> <div class="box_agreement"> <input type="checkbox" checked="checked" id="cbId" onclick="confirmBox()">同意<a href="/index/protocol.html">個人隱私協議</a> </div> <script type="text/javascript"> // 1.在點提交按鈕的時候驗證checkbox是否選中 function confirmBox(){ var confirmBox = document.getElementById("cbId");//cbId為checkbox的ID if(confirmBox.checked){ form.submit(); }else{ alert("請同意協議"); return false; } } </script> </body> </html>
效果圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:0;} .box_agreement{ text-align: center; } </style> </head> <body> <!-- 第二種 jquery --> <div class="box_agreement"> <input type="checkbox" checked="checked" id="cbId" >同意<a href="/index/protocol.html">個人隱私協議</a> <button id="btn">點擊</button> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 1、寫法 $("#btn").click(function(){ if($('#cbId').length){ if(!($('#cbId').is(':checked'))){ alert('請同意協議'); return false; }; } }) ///2、寫法 // $("#btn").click(function(){ // var check_box = $("#cbId"); // if(check_box.is(':checked')){ // form.submit(); // }else{ // alert("請同意協議"); // return false; // } // }); }); </script> </body> </html>
效果圖：
