原文地址: https://blog.csdn.net/oiu1010110/article/details/52997438
实现了：
1.选中除开表头的任何一行中的任何一项，选中该行复选框，有利于用户体验。
2.至少选中表中一项，表单提交。
html:
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>带复选框的表单提交 </title>
-
<script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"> </script>
-
<style type="text/css">
-
table {
-
border-collapse: collapse;
-
}
-
td, th {
-
width: 40px;
-
height: 100px;
-
border: 1px solid #000;
-
}
-
table tbody tr :hover {
-
background-color: red;
-
}
-
table tbody tr :not( :first-child) :hover { background-color: #666;
-
}
-
</style>
-
</head>
-
<body>
-
<form action="http://www.baidu.com" id="order_shopping" name="order_shopping" method="get" onsubmit="return checkShopping();">
-
<table id="table" class="fl">
-
<thead>
-
<tr>
-
<th>商品名 </th>
-
<th>单价 </th>
-
<th>购买数量 </th>
-
<th> <input id="both" type="checkbox" name="both" autocomplete="off"> </th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>香蕉 </td>
-
<td>100 </td>
-
<td>4 </td>
-
<td>
-
<input type="checkbox" name="choice" autocomplete="off">
-
</td>
-
</tr>
-
<tr>
-
<td>苹果 </td>
-
<td>100 </td>
-
<td>5 </td>
-
<td>
-
<input type="checkbox" name="choice" autocomplete="off">
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
<input type="submit" id="add_shopping" value="添加购物车"/>
-
</form>
-
<p id="msg"> </p>
-
</body>
-
</html>
js:
-
<script type="text/javascript">
-
$( function(){
-
//全选
-
$( "input[name='both']").click( function(){
-
var $isSelected = $( this).is( ":checked");
-
for( var i = 0;i<$( "input[name='choice']").length;i++){
-
$( "input[name='choice']")[i].checked = $isSelected;
-
}
-
})
-
-
//选中行选中checkbox
-
$( "#table tr").slice( 1).each( function(){
-
var This = this;
-
$( this).children().click( function(){
-
$($(This).children()[ 3]).children().each( function(){
-
if( this.type== "checkbox"){
-
if(! this.checked){
-
this.checked = true;
-
} else{
-
this.checked = false;
-
}
-
}
-
});
-
});
-
});
-
});
-
// 有选中才提交
-
function checkShopping(){
-
$( "#msg").html( '');
-
var $checkbox = $( "input[name='choice']");
-
for( var i = 0 ;i<$checkbox.length;i++){
-
if(checkObj($checkbox[i])){
-
return true;
-
}
-
}
-
if(i==$checkbox.length){
-
$( "#msg").html( '提示：至少选择1条信息!');
-
return false;
-
}
-
}
-
function checkObj(obj){
-
if(obj.checked){
-
return true;
-
} else{
-
return false;
-
}
-
}
-
-
</script>
-