1.用户至少选中某项，即表示选中该行，同时该行的数据验证通过，表单提交；否则，不提交。
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带数据验证和复选框的表单提交</title> <script src="https://www.jb51.net/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" method="get" onsubmit="return checkShopping();"> <table> <thead> <tr> <th>商品名</th> <th>单价</th> <th>购买数量</th> <th><input type="checkbox" autocomplete="off"></th> </tr> </thead> <tbody> <tr> <td>香蕉</td> <td>100</td> <td><input type="text" autocomplete="off" placeholder="请输入数量"></td> <td> <input type="checkbox" autocomplete="off"> </td> </tr> <tr> <td>苹果</td> <td>100</td> <td><input type="text" autocomplete="off" placeholder="请输入数量"></td> <td> <input type="checkbox" autocomplete="off"> </td> </tr> </tbody> </table> <input type="submit" value="添加购物车"/> </form> <p></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>
总结
以上所述是小编给大家介绍的基于JavaScript实现带数据验证和复选框的表单提交，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: