(function($){

    $.fn.check = function(options){

        var options = $.extend({

            element : "input[name='node']"

        },options);

        return this.each(function(){

            var self = $(this);

            var elements = $(options.element);

            self.click(function(){

                elements.each(function(index,dom){

                    dom.checked = self.prop("checked"); //将本身self的状态赋值给elements的状态

                });

            });

            elements.click(function(){

                var leng = elements.filter(":checked").length;

                if(leng == elements.length){

                    self.prop("checked",true);

                }else{

                    self.prop("checked",false);

                }

            });

        });

    }

})(jQuery);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <table>

            <thead>

                <tr>

                    <th><input type="checkbox" id="selAll"/>全选</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1.<input type="checkbox" name="node"/></td>

                </tr>

                <tr>

                    <td>2.<input type="checkbox" name="node"/></td>

                </tr>

                <tr>

                    <td>3.<input type="checkbox" name="node"/></td>

                </tr>

                <tr>

                    <td>4.<input type="checkbox" name="node"/></td>

                </tr>

            </tbody>

        </table>

        <script src="../jquery.min.js"></script>

        <script src="check.js"></script>

        <script>

            $("#selAll").check();

        </script>

    </body>

</html>

自写了一个全选反选的jQuery插件，根据项目需求进行插件的修改，如根据选择的数量来进行是否选中。

jQuery全选反选插件的更多相关文章

  1. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...

  3. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  4. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  5. jquery全选 反选

    //全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...

  6. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  7. jquery全选反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery 全选 反选 单击行改变背景色

    我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...

  9. jquery 全选反选 .prop('checked',!$(this).is(':checked'));

    //废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...

随机推荐

  1. 线程池ThreadPoolExecutor使用原理

    本文来源于翁舒航的博客,点击即可跳转原文观看!!!(被转载或者拷贝走的内容可能缺失图片.视频等原文的内容) 若网站将链接屏蔽,可直接拷贝原文链接到地址栏跳转观看,原文链接:https://www.cn ...

  2. ReadWriteLock

    ReadWriteLock也是一个接口,只有两个方法 一个用来获取读锁,一个用来获取写锁.也就是说将文件的读写操作分开,分成2个锁来分配给线程,从而使得多个线程可以同时进行读操作.下面的Reentra ...

  3. JAVA成员方法的调用分析

    如下面例子: public class A { int x=10; public int getx() {return x;} } public class B extends A { int x=2 ...

  4. Docx4j将html转成word时，br标签为软回车的问题修改

    docx4j版本:3.0.1 修改jar包:docx4j-ImportXHTML maven配置为: 具体代码位置:\org\docx4j\convert\in\xhtml\XHTMLImporter ...

  5. HTML5之新增的属性和废除的属性 （声明：内容节选自《HTML 5从入门到精通》）

    新增的属性 1.表单相关的属性 ———————————————————————————————————————————————————————— •autocomplete 属性 autocomple ...

  6. Flink1.4.0中反序列化及序列化类变化

    Flink1.4.0中,反序列化及序列化时继承的类,有一些被标记为了“@deprecated”,路径上也有变化: 1.AbstractDeserializationSchema 以前路径 org.ap ...

  7. Android 应用安装

    DDMS下Files Explorer /data/app/xxx.apk 安装过程:1.拷贝文件xxx.apk到/data/app/xxx-1.apk 2.在/data/data目录下创建一个文件夹 ...

  8. 风险管理，未雨绸缪——《代码之殇》读书笔记II

    这次的内容主要是关于软件开发过程中的风险管理,包括项目用时估计.产品的发布与更新.承诺兑现的重要性. ①项目用时估计 有人会质疑项目用时估计的可靠性,因为就事而言,这次的任务可能和上次不一样了,开发环 ...

  9. 《图解HTTP》总结 - 思维导图版

      对具体内容感兴趣的,可以去  http://www.51test.space/archives/2830  免费下载<图解HTTP>.

  10. leveldb开篇

    因为工作的需求,最近看了一些项目的源码,包括nginx.tair.leveldb,一直看了下来都没有写东西的习惯,虽然作了不少记录,但都是只有自己才能看懂的笔记. 好多次都说开始写blog,锻炼一下自 ...