實現：
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> 總結
以上所述是小編給大家介紹的基于JavaScript實現帶數據驗證和復選框的表單提交，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
