jquery全选,全不选,反选,获取选择框的值

2018-08-02 02:02:38   前端

  jquery   js  

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta charset='utf-8'/>
  4. <head>
  5. <title>全选,不全选,反选</title>
  6. <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9. <ul id="list">
  10. <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
  11. <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
  12. <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
  13. <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
  14. <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
  15. <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
  16. </ul>
  17. <input type="checkbox" id="all">
  18. <input type="button" value="全选" class="btn" id="selectAll">
  19. <input type="button" value="全不选" class="btn" id="unSelect">
  20. <input type="button" value="反选" class="btn" id="reverse">
  21. <input type="button" value="获得选中的所有值" class="btn" id="getValue">
  22. </body>
  23. <script type="text/javascript">
  24. $(document).ready(function(){
  25. //全选或全不选
  26. $("#all").click(function(){
  27. if(this.checked){
  28. $("input[type=checkbox]").prop("checked",true);
  29. }else{
  30. $("input[type=checkbox]").prop("checked",false);
  31. }
  32. });
  33. //全选
  34. $("#selectAll").click(function () {
  35. $("#list :checkbox,#all").prop("checked", true);
  36. });
  37. //全不选
  38. $("#unSelect").click(function () {
  39. $("#list :checkbox,#all").prop("checked", false);
  40. });
  41. //反选
  42. $("#reverse").click(function () {
  43. $("#list :checkbox").each(function () {
  44. $(this).prop("checked", !$(this).prop("checked"));
  45. });
  46. allchk();
  47. });
  48. //设置全选复选框
  49. $("#list :checkbox").click(function(){
  50. allchk();
  51. });
  52. //获取选中选项的值
  53. $("#getValue").click(function(){
  54. str = '';
  55. n = '';
  56. $("#list :checkbox").each(function(){
  57. if(this.checked){
  58. str = str + n + $(this).val();
  59. n = ',';
  60. }
  61. });
  62. alert(str);
  63. });
  64. })
  65. function allchk(){
  66. var chknum = $("#list :checkbox").size();//选项总个数
  67. var chk = 0;
  68. $("#list :checkbox").each(function () {
  69. if($(this).attr("checked")==true){
  70. chk++;
  71. }
  72. });
  73. if(chknum==chk){//全选
  74. $("#all").attr("checked",true);
  75. }else{//不全选
  76. $("#all").attr("checked",false);
  77. }
  78. }
  79. </script>
  80. </html>