你的位置:快乐忆站 \ 前端 \ 文章正文

jQuery全选与取消全选插件

因为项目的需求,涉及到一个全选与取消全选的功能,相信大家在做项目的时候也一定遇到过,其实功能也很简单,就是每次都去写这么一串代码挺麻烦的,而且也问了代码的重用,所以写了这么个插件供需要的童鞋使用!~网上有找到过类似功能的插件,但是总有那么一些不完善,索性就自己写了一个。

先看一个我写的demo吧:点击查看

插件代码其实只有20行左右,原理就是点击全选按钮使得约定的多选框全选上,再次点击则取消全选,当然,点击约定的多选框时,如果当前并没有全选上,那么全选按钮会是未选中状态,反之全选按钮将会是选中状态。插图:

HTML代码:

<input type="checkbox" name="test[]" />选项1
<input type="checkbox" name="test[]" />选项2
<input type="checkbox" name="test[]" />选项3
<input type="checkbox" name="test[]" />选项4
<input type="checkbox" name="test[]" />选项5
<input type="checkbox" id="checkall" />全选

插件代码(2013年7月23日已更新,支持callback回掉函数获取选中的个数):

//name: 全选与取消全选插件
//userage: $("selector").checkall({chname:"your checkbox name", callback: function(){});
//author: 小松(sahala_2007@126.com)
;(function($){
	$.fn.checkall = function(options){
		var defaults = {chname:"checkname[]", callback:function(){}},
			options = $.extend(defaults, options),
			$obj = $(this),
			$items = $("input[name='"+options.chname+"']"),
			checkedItem = 0;
		$items.click(function(){
			var checkedItem = $items.filter(":checked").length;
			var isChecked = checkedItem === $items.length;
			$obj.prop("checked", isChecked);
			if(typeof options.callback === "function") options.callback(checkedItem);
		});
		return $obj.each(function(){
			$(this).click(function(){
				$items.attr("checked", $(this).attr("checked"));
				var checkedItem = $items.filter(":checked").length;
				if(typeof options.callback === "function") options.callback(checkedItem);
			});
		});
	}
})(jQuery);

调用方法:

$(function(){
	$("#checkall").checkall({chname:"test[]",callback: function(e){alert(e)}});
})

是不是很简单啊?

Tips:写这个插件时判断全选按钮是否是选中状态时,一开始我用了$(this).attr("checked")(见插件第9行),后来发现这样是不对的,如果你默认是个选中状态,那他这个值永远都是选中状态,所以后来改成了通过this.checked来判断。

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 14#
    玉米串
    玉米串 Google Chrome 19.0.1084.56 Windows XP 2012-07-17 21:26 回复

    我用了,谢谢
    小松
    小松 Google Chrome 18.0.1025.166 Android 4.0.4 2012-07-17 22:29 回复
    @玉米串:哈哈,有什么问题发上来一起讨论
  2. 13#
    青春记忆网
    青春记忆网 Maxthon 3.3.8.1000 Windows XP 2012-05-13 00:03 回复
    好东西,支持一个
  3. 12#
    wmtimes
    wmtimes Google Chrome 16.0.912.63 Windows 7 2012-02-16 19:33 回复
    确实不错。很全面。支持,收藏了。
    小松
    小松 Google Chrome 17.0.963.46 Windows 7 2012-02-17 09:21 回复
    @wmtimes:哈哈,你太抬举了。。。
  4. 11#
    凡客礼品卡
    凡客礼品卡 Firefox 10.0 Windows XP 2012-02-15 18:31 回复
    这是一种新思路啊
  5. 10#
    货源批发
    货源批发 Google Chrome 14.0.835.202 Windows XP 2012-02-14 09:10 回复
    强势来临
  6. 9#
    林西老九
    林西老九 Google Chrome 17.0.963.46 Windows XP 2012-02-12 19:03 回复
    恩,确实是很难
    小松
    小松 Google Chrome 17.0.963.56 Windows 7 x64 Edition 2012-02-18 15:09 回复
    @林西老九:嘛意思?
  7. 8#
    小子
    小子 Google Chrome 18.0.1025.3 Windows 7 2012-02-09 09:27 回复
    你妹的tips
    明明是不一样的,默认checked,点击之后返回的值是undefined
    小松
    小松 Google Chrome 16.0.912.77 Windows 7 2012-02-09 09:56 回复
    @小子:this.checked返回的是true或者false,木有undefined的
    小子
    小子 Google Chrome 18.0.1025.3 Windows 7 2012-02-09 09:59 回复
    @小松:我说的是 $(this).attr("checked")
    小松
    小松 Google Chrome 16.0.912.77 Windows 7 2012-02-09 10:33 回复
    @小子:刚又测试了下$(this).attr("checked"),貌似跟this.checked返回一样了。。。
  8. 7#
    小子
    小子 Google Chrome 18.0.1025.3 Windows 7 2012-02-09 09:19 回复
    文字没用label,
    this.checked原生的js和jquery代码共存,容易误会。
    小松
    小松 Google Chrome 16.0.912.77 Windows 7 2012-02-09 09:50 回复
    @小子:demo没考虑到语义化,代码共存应该没多大问题吧,哪个简洁用哪个呗~
  9. 6#
    刘学政博客
    刘学政博客 Google Chrome 18.0.1010.1 Windows XP 2012-02-09 08:49 回复
    这个代码很实用,多谢老兄分享哦。
  10. 5#
    刘学政博客
    刘学政博客 Google Chrome 18.0.1010.1 Windows XP 2012-02-09 08:47 回复
    这是好东西啊,希望以后能用到。
1 2

随机日志:

推荐日志:

彩色标签:

sitemap