(转载+原创)jQuery实现的全选、全不选、反选和半选功能
生活随笔
收集整理的這篇文章主要介紹了
(转载+原创)jQuery实现的全选、全不选、反选和半选功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
轉(zhuǎn)載自:https://www.helloweba.com/view-blog-254.html
helloweba.com?作者:月光光?時間:2014年03月31日 21:12?標(biāo)簽:?jQuery?
下面是自己修改過的代碼:
演示:jQuery實(shí)現(xiàn)的全選、反選和不選功能 .demo{width:520px; margin:40px auto 0 auto; min-height:250px;} ul li{line-height:30px; padding:4px 0; font-size:14px} .btn{overflow: hidden;display:inline-block;*display:inline;padding:4px 20px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; margin-left:2px} <script type="text/javascript" src="jquery-1.11.0.js"></script> <script>$(function(){$("#all").click(function(){$("#list input").prop("checked",this.checked);}) }); //全選 $(function(){$("#selectAll").click(function(){$("#list input,#all").prop("checked",true);});}); //全不選 $(function(){$("#unSelect").click(function(){$("#list input,#all").prop("checked",false);}); }); //反選 $(function(){$("#reverse").click(function(){$("#list input").each(function(){$(this).prop("checked",!$(this).prop("checked"));})checkee(); }); }) //獲取選取值功能 $(function(){$("#getValue").click(function(){var valArr = new Array;$("#list input:checked").each(function(i){valArr[i]=$(this).val();});alert(valArr);//下面輸出和上面的alert一樣效果var vals = valArr.join(',');alert(vals);}); }) //半選功能 $(function(){$("#list input").click(function(){checkee();});}) //校驗(yàn)函數(shù) function checkee(){var i = 0;$("#list input:checked").each(function(){i++;});if(i==$("#list li").size()){$("#all").prop("checked",true);}else{$("#all").prop("checked",false);} } </script>
- 1.時間都去哪兒了
- 2.海闊天空
- 3.真的愛你
- 4.不再猶豫
- 5.光輝歲月
- 6.喜歡妳
總結(jié)
以上是生活随笔為你收集整理的(转载+原创)jQuery实现的全选、全不选、反选和半选功能的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 计算机毕业设计(38)java毕设作品之
- 下一篇: .net core 中的[FromBod