飞龙博客

善人行善,从乐入乐。

全选反选飞龙jQuery解决方案优化版

feilong.org 修订于2017-06-05 03:41:07 1,244

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">【官方授权销售】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">起泡剂</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">【官方授权销售】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">起泡剂</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>

更新网址:http://feilong.org/jquery-checkall-revert-best
最初发布:20170522 06:41:11 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群