第一种情况：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里面