实现：
1.用户至少选中某项，即表示选中该行，同时该行的数据验证通过，表单提交；否则，不提交。
html
<!doctype 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; } td input[name='number']{ width: 100px; } </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><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td> <td> <input type="checkbox" name="choice" autocomplete="off"> </td> </tr> <tr> <td>苹果</td> <td>100</td> <td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></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; } }) }); // 输入正确，且有选中该行复选框才提交 function checkshopping(){ $(#msg).html(''); var $checkbox = $(input[name='choice']); var reg = /^[1-9]\d*$/; var $number = ; var isinteger = false;//记录数字是否正确 var moreone = false;//选择复选框个数 $checkbox.each(function(){ if($(this).is(:checked)){ $number = $(this).parent().prev().children().val(); if(reg.test($number)){ isinteger = true; moreone = true; }else{ $(#msg).html('提示：输入数量必须为正整数'); isinteger = false; } } }) if(isinteger && moreone){ return true; }else if(!moreone){ $(#msg).html('提示：至少选择一条信息'); return false; }else{ return false; } } </script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js轻松实现轮播图
vue0.1代码怎么添加到vue2.0使用
webpack入门教程详解
以上就是js实现数据验证与复选框表单提交的详细内容。