jquery 全反选插件

/*
 * selectToDo - jQuery plugin for select checkbox
 *
 * Copyright (c) 2014 Elric Huang
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   https://github.com/elrichuang/jquery.selectToDo.js
 *
 * Version:  0.1.3
 *
 */
;(function ($){
	$.fn.selectToDo = function (options){
		var settings = $.extend({},{
			"selectAllButton"    : $("#selectAll"),
			"selectNoneButton"   : $("#selectNone"),
			"selectInvertButton" : $("#selectInv"),
		}, options);

		var element = this;

		$(settings.selectAllButton).bind("click",function(){
			element.selectAll();
		});
		$(settings.selectNoneButton).bind("click",function(){
			element.selectNone();
		});
		$(settings.selectInvertButton).bind("click",function(){
			element.selectInvert();
		});

		this.selectAll = function(){//全选
			element.prop(‘checked‘, true);
		};

		this.selectNone = function(){//全不选
			element.prop(‘checked‘, false);
		};

		this.selectInvert = function(){//反选
			element.each(function(){
				if(this.checked){
					$(this).prop(‘checked‘, false);
				}else{
					$(this).prop(‘checked‘, true);
				}
			});
		};

		this.result = function(){
			var checkVal=[];
			element.each(function(){
				if(this.checked){
					checkVal.push($(this).val());
				}
			});
			if(checkVal.length > 0)
			{
				// 引用回调函数
			    return checkVal.join(",");
			}else{
				return null;
			}
		};

		return this;
	};
})(jQuery);
时间: 2024-10-17 11:30:36

jquery 全反选插件的相关文章

jQuery全屏插件Textarea Fullscreen

插件描述 Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js和textareafullscreen.css <link rel="stylesheet" type="text/css" href="css/textareafullscreen.css"> <script type="

jQuery全选反选插件的写法

jQuery全选反选插件,经易让你实现一个表单列表数据的全选与取消全选功能,内含示例,小巧实用.自动判断当前选中数量,加上全选.在没有jQuery之前,我们需要一大段js代码来实现这种效果.有了jQuery这个强大的库之后,我们可以很方便的开发实现这种效果的jQuery插件.我将它命名为jQuery.fn.check插件.前端框架分享 在构建我们的插件之前,我们想考虑一下其功能需求: 所有复选框的状态都随全选复选框的状态而发生变化:如果所有复选框都被选中时,全选复选框立即处于选中状态:如果当前选

jquery全选,jquery全不选,jquery反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>全选,不全选,反选</title> <script src="js/jquery.js" type="text/j

jQuery 全选与反选时出现的bug!

今天在写项目,使用jQuery1.10.2 发现一个小小的bug, 在设置checked属性时,前两次反选的时候是正常的,后面均不正确,通过调试, 准确的说应该是只有第一次是正确的,在第二次单击时,事件快完成的时候的运行的流程有点奇怪.所以自己感觉这么 成熟的框架不应该出现这个问题,于是又将1.11.1版本下载下来,也是jQuery1的最新版本测试,同样末果,问题依 然存在,使用标准的document.getElementById, 直接设置值是没有问题的. 我本人根据测试,应该是jQuery的

jquery 全选 反选 取消 批量删除

首选引入jquery 全选 //全选 function myall(){ $("input[name='d[]']").each(function(index,e){ $(this).prop('checked',true); }); } 取消 //当true改为false时为取消 // function no(){ // $("input[name='d[]']").each(function(index,e){ // $(this).prop('checked'

基于jQuery全屏相册插件zoomVisualizer

基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="zoom-visualizer"> <div class="lightbox-ofertas-bg"></div> <div class="lightbox&q

jquery全选、反选、全不选

jquery全选.反选.全不选简单实现 Jquery代码 !function ($) { //全选 反选 全不选 $("#selAll").click(function () { $(".lists :checkbox").not(':disabled').prop("checked", true); }); $("#unSelAll").click(function () { $(".lists :checkbox

Jquery全选,Jquery全不选,Jquery反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>全选,不全选,反选</title&g

基于jQuery全屏焦点图切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: