带复选框的表单提交

原文地址: https://blog.csdn.net/oiu1010110/article/details/52997438

实现了:

1.选中除开表头的任何一行中的任何一项,选中该行复选框,有利于用户体验。

2.至少选中表中一项,表单提交。

html:

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>带复选框的表单提交 title>
  5. <script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"> script>
  6. <style type="text/css">
  7. table {
  8. border-collapse: collapse;
  9. }
  10. td, th {
  11. width: 40px;
  12. height: 100px;
  13. border: 1px solid #000;
  14. }
  15. table tbody tr :hover {
  16. background-color: red;
  17. }
  18. table tbody tr :not( :first-child) :hover { background-color: #666;
  19. }
  20. style>
  21. head>
  22. <body>
  23. <form action="http://www.baidu.com" id="order_shopping" name="order_shopping" method="get" onsubmit="return checkShopping();">
  24. <table id="table" class="fl">
  25. <thead>
  26. <tr>
  27. <th>商品名 th>
  28. <th>单价 th>
  29. <th>购买数量 th>
  30. <th> <input id="both" type="checkbox" name="both" autocomplete="off"> th>
  31. tr>
  32. thead>
  33. <tbody>
  34. <tr>
  35. <td>香蕉 td>
  36. <td>100 td>
  37. <td>4 td>
  38. <td>
  39. <input type="checkbox" name="choice" autocomplete="off">
  40. td>
  41. tr>
  42. <tr>
  43. <td>苹果 td>
  44. <td>100 td>
  45. <td>5 td>
  46. <td>
  47. <input type="checkbox" name="choice" autocomplete="off">
  48. td>
  49. tr>
  50. tbody>
  51. table>
  52. <input type="submit" id="add_shopping" value="添加购物车"/>
  53. form>
  54. <p id="msg"> p>
  55. body>
  56. html>

js:
  1. <script type="text/javascript">
  2. $( function(){
  3. //全选
  4. $( "input[name='both']").click( function(){
  5. var $isSelected = $( this).is( ":checked");
  6. for( var i = 0;i<$( "input[name='choice']").length;i++){
  7. $( "input[name='choice']")[i].checked = $isSelected;
  8. }
  9. })
  10. //选中行选中checkbox
  11. $( "#table tr").slice( 1).each( function(){
  12. var This = this;
  13. $( this).children().click( function(){
  14. $($(This).children()[ 3]).children().each( function(){
  15. if( this.type== "checkbox"){
  16. if(! this.checked){
  17. this.checked = true;
  18. } else{
  19. this.checked = false;
  20. }
  21. }
  22. });
  23. });
  24. });
  25. });
  26. // 有选中才提交
  27. function checkShopping(){
  28. $( "#msg").html( '');
  29. var $checkbox = $( "input[name='choice']");
  30. for( var i = 0 ;i<$checkbox.length;i++){
  31. if(checkObj($checkbox[i])){
  32. return true;
  33. }
  34. }
  35. if(i==$checkbox.length){
  36. $( "#msg").html( '提示:至少选择1条信息!');
  37. return false;
  38. }
  39. }
  40. function checkObj(obj){
  41. if(obj.checked){
  42. return true;
  43. } else{
  44. return false;
  45. }
  46. }
  47. script>

你可能感兴趣的:(jsp)