夏日博客

A-A+

完整的jquery全选/取消全选示例效果

2016年01月11日 前端设计 暂无评论 阅读 6 views 次

jquery取消全选与全选按钮比起js要简单多了，我们可以直接使用attr与removeAttr方法来给checkbox增加或删除checked事件的真假了，具体如下

由于这两个比较简单，我就直接上代码吧:

  1. //全选/取消全选  
  2. $('#quanxuan').toggle(function () {  
  3.     $("input[name='abc']").attr("checked", 'true');  
  4. }, function () {  
  5.     $("input[name='abc']").removeAttr("checked");  
  6. });  
  7.   
  8. //反选  
  9. $('#fanxuan').click(function () {  
  10.     $("input[name='abc']").each(function () {  
  11.         if ($(this).attr("checked")) {  
  12. $(this).removeAttr("checked");  
  13.         } else {  
  14. $(this).attr("checked", 'true');  
  15.         }  
  16.     });  
  17. });  

再总结一下:

jquery版本在1.3之前时，获取checkbox的选中项的操作：

  1. $("input[name='abc'][checked]").each(function () {  
  2.         alert(this.value);  
  3.     });  
  4. jquery版本在1.3之后时，获取checkbox的选中项的操作：  
  5.     $("input[name='abc']:checked").each(function () {  
  6.         alert(this.value);  
  7. });  

附 完整测试Demo代码:

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.     <title></title>  
  5.     <script src="js/jquery-1.7.2.min.js"></script>  
  6.     <script>  
  7.         $(function () {  
  8. //获取选中项(FF和chrome下无效)  
  9. $('#huoqu').click(function () {  
  10.     //$("input[name='abc'][checked]").each(function () {  
  11.     //    alert(this.value);  
  12.     //});  
  13.     $('#show').html("");  
  14.     $("input[name='abc'][checked]").each(function () {  
  15.         //alert(this.value);  
  16.         $('#show').append(this.value + "  ");  
  17.     });  
  18. });  
  19.   
  20. //获取选中项  
  21. $('#huoqu2').click(function () {  
  22.     $('#show').html("");  
  23.     $("input[name='abc']:checked").each(function () {  
  24.         //alert(this.value);  
  25.         $('#show').append(this.value + "  ");  
  26.     });  
  27. });  
  28.   
  29. //全选/取消全选  
  30. $('#quanxuan').toggle(function () {  
  31.     $("input[name='abc']").attr("checked", 'true');  
  32. }, function () {  
  33.     $("input[name='abc']").removeAttr("checked");  
  34. });  
  35.   
  36. //反选  
  37. $('#fanxuan').click(function () {  
  38.     $("input[name='abc']").each(function () {  
  39.         if ($(this).attr("checked")) {  
  40. $(this).removeAttr("checked");  
  41.         } else {  
  42. $(this).attr("checked", 'true');  
  43.         }  
  44.     });  
  45. });  
  46.         });  
  47.     </script>  
  48. </head>  
  49. <body>  
  50.     <form id="form1" runat="server">  
  51.         <div>  
  52. <input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /><label for="in1">一年级</label>  
  53. <input type="checkbox" name="abc" value="二年级" id="in2" /><label for="in2">二年级</label>  
  54. <input type="checkbox" name="abc" value="三年级" id="in3" /><label for="in3">三年级</label>  
  55. <input type="checkbox" name="abc" value="四年级" id="in4" /><label for="in4">四年级</label>  
  56. <input type="checkbox" name="abc" value="五年级" id="in5" /><label for="in5">五年级</label>  
  57. <input type="checkbox" name="abc" value="六年级" id="in6" /><label for="in6">六年级</label>  
  58. <input type="checkbox" name="abc" value="七年级" id="in7" /><label for="in7">七年级</label>  
  59. <input type="checkbox" name="abc" value="八年级" id="in8" /><label for="in8">八年级</label>  
  60.         </div>  
  61.         <br />  
  62.         <input type="button" id="huoqu" value="获取选中项（FF和chrome下无效）" />  
  63.         <input type="button" id="quanxuan" value="全选/取消全选" />  
  64.         <input type="button" id="fanxuan" value="反选" />  
  65.         <input type="button" id="huoqu2" value="获取选中项" />  
  66.        <br />  
  67.         选中项： <div id="show">  
  68.         </div>  
  69.     </form>  
  70. </body>  
  71. </html>  
标签：

给我留言