全选反选飞龙jQuery解决方案优化版
feilong.org 修订于2017-05-22 06:41:11 您好,第 491 位朋友!2012年飞龙写过一个jQuery全选反选飞龙jQuery解决方案http://feilong.org/check-uncheck-juery-solution 2012年于广州。本日志对此再进一步优化,使他更加简练和灵活。本日志更新网址:http://feilong.org/jquery-checkall-revert-best
加入收藏夹,查看更方便。
/** 全选反选飞龙jQuery解决方案 **/ // click to checkall or revert by feilong.org check.js $(function(){ //application of checkall flchecks(); function flchecks(){ var c='#checkgoods input[type=checkbox][name]'; var a='.checkall'; var r='.checkrevert'; var s='#buysubmit'; flcheckall(c,a); flcheckrevert(c,r); flchecksubmit(c,s); }//0.5 function flcheckall(c,a){ var allc=c; var c=$(c); var clen=c.length; var a=$(a); var isckb=a.is(':checkbox'); //alert(isckb); if(isckb){ a.click(function(){ var hascked=a.prop('checked'); //alert(hascked); if(hascked){ c.each(function(i,el){ //$(el).attr('checked', 'checked'); $(el).prop('checked', true);//for jQuery 1.6+ });//3 }else{ c.each(function(i,el){ //$(el).attr('checked', 'checked'); $(el).prop('checked', false);//for jQuery 1.6+ });//3 } });//2 c.each(function(i,el){ $(el).click(function(){ var allced=$(allc+':checked'); var allcedlen=allced.length; if(allcedlen==clen){a.prop('checked', true);}else{a.prop('checked', false);} }); });//2 }else{ a.click(function(){ c.each(function(i,el){ //$(el).attr('checked', 'checked'); $(el).prop('checked', true);//for jQuery 1.6+ });//2 });//1 } }//0.5 function flcheckrevert(c,r){ var c=$(c);//alert(c.length); var r=$(r); r.click(function(){ c.each(function(i){ if(this.checked){ //$(this).removeAttr('checked'); $(this).prop('checked', false);//for jQuery 1.6+ }else{ //$(this).attr('checked', 'checked');//alert('no') $(this).prop('checked', true);//for jQuery 1.6+ } }); });//1 }//0.5 function flchecksubmit(c,s){ var s=$(s); s.click(function(e){ //alert(s.val()); e.preventDefault(); var ced=$(c+':checked'); if(ced.length){ alert('有选择'); //$('#'+formid).submit(function(){return true;}); return true; }else{alert('至少选一项'); return false;// so it won't submit } });//1 }//0.5 });//0 //jsend feilong |
可以使用js压缩工具压缩如下:
// click to checkall or revert by feilong.org minified ck.js $(function(){ //application for some site. perhaps you should change the selectors below function flck(){ var c='#checkgoods input[type=checkbox][name]'; var a='.checkall'; var r='.checkrevert'; var s='#buysubmit'; flcka(c,a);flckr(c,r);flcks(c,s); }flck(); function flcka(c,a){var e=c,c=$(c),t=c.length,a=$(a),n=a.is(":checkbox");n?(a.click(function(){var e=a.prop("checked");e?c.each(function(e,t){$(t).prop("checked",!0)}):c.each(function(e,t){$(t).prop("checked",!1)})}),c.each(function(n,r){$(r).click(function(){var n=$(e+":checked"),r=n.length;r==t?a.prop("checked",!0):a.prop("checked",!1)})})):a.click(function(){c.each(function(e,t){$(t).prop("checked",!0)})})} function flckr(c,r){var c=$(c),r=$(r);r.click(function(){c.each(function(e){this.checked?$(this).prop('checked',!1):$(this).prop('checked',!0)})})} function flcks(c,s){var s=$(s);s.click(function(e){e.preventDefault();var t=$(c+':checked');return t.length?(alert('有选择'),!0):(alert('至少选一项'),!1)})} });//0 //jsend feilong |
备注:html举例如下
<form id="checkgoods" method="post" action="#"> <table> <tr> <th width="5%"></th> <th id="biaoti">产品标题</th> <th width="17%">商标名</th> <th width="13%">型号</th> <th width="16%">生产商</th> <th width="9%"></th> </tr> <tr> <td><input type="checkbox" name="goods[]" value="1"/></td> <td><a href="flgood.html" target="_blank" rel="noopener noreferrer">【官方授权销售】PA6 SABIC LNP* Thermotuf* PF006I 抗撞击性高</a></td> <td>ORFOMF2 </td> <td>ORFOMF2 </td> <td>雪佛龙菲利浦</td> <td><a href="flpageorder.html?goodid=1">我要订购</a></td> <tr> <tr> <td><input type="checkbox" name="goods[]" value="2"/></td> <td><a href="flgood.html" target="_blank" rel="noopener noreferrer">起泡剂</a></td> <td>ORFOMF2 </td> <td>ORFOMF2 </td> <td>雪佛龙菲利浦</td> <td><a href="flpageorder.html?goodid=2">我要订购</a></td> <tr> </table> <input id="buysubmit" type="submit" value="批量订购"/> </form> <a class="checkall">全选</a> <a class="checkrevert">反选</a> <!--所有js请放到body结束标签之前,如下: --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="ck.js"></script> |
<form id="checkgoods" method="post" action="#"> <table> <tr> <th width="5%"><input type="checkbox" class="checkall" /></th> <th id="biaoti">产品标题</th> <th width="17%">商标名</th> <th width="13%">型号</th> <th width="16%">生产商</th> <th width="9%">操作</th> </tr> <tr> <th><input type="checkbox" name="goods[]" value="1"/></th> <td><a href="flgood.html" target="_blank" rel="noopener noreferrer">【官方授权销售】PA6 SABIC LNP* Thermotuf* PF006I 抗撞击性高</a></td> <td>ORFOMF2 </td> <td>ORFOMF2 </td> <td>雪佛龙菲利浦</td> <td><a href="flpageorder.html?goodid=1">我要订购</a></td> <tr> <tr> <th><input type="checkbox" name="goods[]" value="2"/></th> <td><a href="flgood.html" target="_blank" rel="noopener noreferrer">起泡剂</a></td> <td>ORFOMF2 </td> <td>ORFOMF2 </td> <td>雪佛龙菲利浦</td> <td><a href="flpageorder.html?goodid=2">我要订购</a></td> <tr> </table> <input id="buysubmit" type="submit" value="批量订购"/> </form> <!--所有js请放到body结束标签之前,如下: --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="ck.js"></script> |
更新网址:https://feilong.org/jquery-checkall-revert-best
最初发布:20170522 06:41:11 feilong.org 于广州
加入收藏夹,查看更方便。
所在分类: 网站开发