第一种情况:checkbox与submit键在同一个的form里面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <script> function checkChecked(form1) { var anyBoxesChecked = false; $('#form1 input[type="checkbox"]').each(function() { if ($(this).is(":checked")) { anyBoxesChecked = true; } }); if (anyBoxesChecked == false) { alert('Please select at least one checkbox'); return false; } } </script> <!--Only one form and one table--> <div class="container"> <div class="row"> <form id="form1" name="form1" method="post" onsubmit="return checkChecked('form1');"> <table> <tr> <th><input id="checkbox" type="checkbox"/><br/></th> <th>ID</th> <th>Username</th> </tr> <tr> <td><input id="checkbox" type="checkbox"/><br/></td> <td>1</td> <td>Tommy</td> </tr> <tr> <td><input id="checkbox" type="checkbox"/><br/></td> <td>2</td> <td>Douby</td> </tr> <tr> <td><input id="checkbox" type="checkbox"/><br/></td> <td>3</td> <td>Daiby</td> </tr> </table> <button name="submit" type="submit">Submit</button> </form> </div> </div> </body> </html>
最终效果图:
没有点选选框(checkbox)直接点submit键即弹出该alert窗口。
第二种情况:checkbox与submit键分布在两个不同的form里面