(function ($) {
//复选框全选
$.fn.checkAll = function (options) {
var defaults = {
chName:"checkName",     //复选框name属性
callBack:null          //回调函数
},
$obj = $(this),             //引用对象
$items = $("input:checkbox[name=" + options.chName + "]"),      //所有name匹配的复选框
checkedItem = 0;            //选中的复选框个数
options = $.extend(defaults, options);
        //链式调用 
return this.each(function(){
$items.click(function () {
//如果选中总数等于总数
//全选打勾,label文字变成“全不选”
//否则，不打勾
if ($items.length === $items.filter(":checked").length) {
$obj.prop("checked", true);
$obj.next("label") && $obj.next("label").text("全不选");
} else {
$obj.prop("checked", false);
$obj.next("label") && $obj.next("label").text("全 选");
}
//执行回调函数
if (typeof options.callBack === "function") {
options.callBack();
}
});
$obj.click(function () {
//判断该框的状态
//等于就取消所有选中,label文字变成“全选”
//否则，选中所有
if (this.checked) {
$items.prop("checked", true);
$obj.next("label") && $obj.next("label").text("全不选") ;
} else {
$items.prop("checked", false);
$obj.next("label") && $obj.next("label").text("全选");
}
if (typeof options.callBack === "function") {
options.callBack();
}
});
});
};
})(jQuery);

转载于:https://www.cnblogs.com/webFrontDev/archive/2012/11/04/2753502.html

自制jQuery 复选框全选与反选插件相关推荐

  1. Jquery 复选框全选与反选点击执行一次然后失效解决方案

    Jquery 复选框全选与反选点击执行一次然后失效解决方案 参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...

  2. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  3. 复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选

    复选框全选与全不选效果 逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...

  4. JS 原生实现复选框全选反选功能

    ** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个 复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...

  5. 复选框 全选 以及 获取所有选中的值

    复选框 全选 以及 获取所有选中的值 总结一下 jsp中获取 数据 <%Map<String,List> map = (Map<String,List>)Function ...

  6. html复选框全选怎么实现,js html css实现复选框全选与反选

    本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...

  7. html 怎么整体全选功能,html复选框全选按钮

    如何用html做复选框全选中和全不选中 html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = documen ...

  8. 小程序实现复选框全选和取消全选

    页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...

  9. react实现全选和反选_react实现复选框全选和反选组件效果

    本文实例为大家分享了react实现复选框全选和反选组件的具体代码,供大家参考,具体内容如下 运行效果图如下: 代码: import React, { Component } from 'react'; ...

最新文章

  1. 马斯克连发三推，发布退出OpenAI内情
  2. java-jwt这个库没用过吧？
  3. ftrace跟踪内核_ftrace、kpatch、systemtap的基本原理、联系和区别
  4. 关于一些运算（（与运算）、|（或运算）、^（异或运算）........）的本质理解【转】...
  5. 【人物】李开复：未来属于创新者和小公司
  6. MongoDB系列：五、MongoDB Driver使用正确的姿势连接复制集
  7. Mr.J-- HTTP学习笔记（九）-- Web机器人
  8. wait()被notify()后，接着执行wait()后面的语句
  9. 电源大师课笔记 3.5
  10. iOS中的预编译指令的初步探究
  11. 面试技能之软知识（HR面试问题回答）
  12. specification java_Java Specification类代码示例
  13. 鲸会务一站式智能会议系统帮助主办方实现数字化会议管理
  14. Master HA彻底解密
  15. javascript中的正则表达式语法
  16. 负载均衡技术应用介绍
  17. BCD码中的8421码 2421码 5421码和余3码的简单使用
  18. Facebook创始人:不穿袜子的亿万富翁
  19. iOS自动打包（敲一下enter键，完成iOS的打包工作）
  20. 史上最全的C盘垃圾深度清洁指南

热门文章

  1. 团队项目改进与详细设计
  2. redis安装+启动和连接+让redis在后台运行
  3. 9.23 基础知识
  4. Fastjson反序列化泛型类型时候的一个问题
  5. 性能之巅：Linux网络性能分析工具
  6. 微信公众平台服务框架
  7. 图像金字塔：高斯金字塔vs拉普拉斯金字塔
  8. TensorFlow2.0正式版安装
  9. 爱python的胖虾_爱了爱了！0.052 秒打开 100GB 数据，这个Python开源库火爆了！
  10. R语言_驾驶员事故预测