jQuery全选反选插件

时间：2022-09-21 09:47:10
(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全选&sol;反选checkbox

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

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

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: 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 全选反选 &period;prop&lpar;&&num;39&semi;checked&&num;39&semi;&comma;&excl;&dollar;&lpar;this&rpar;&period;is&lpar;&&num;39&semi;&colon;checked&&num;39&semi;&rpar;&rpar;&semi;

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

随机推荐

  1. SQL Server游标的使用【转】

    游标是邪恶的! 在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. 正常面向集合的思维方式是: ...

  2. Data Flow -&gt&semi;&gt&semi; CDC Control Task&comma; CDC Source&comma; CDC Splitter

    CDC Control Task可以从控制CDC数据同步,比如初始化加载.LSN范围的管理.它可以代替另一种做法,就是通过调用一批CDC函数来完成同样的事情.从SSIS的角度来完成,事情编程简单,和另 ...

  3. js判断终端是手机还是电脑

    $(function(){ function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bI ...

  4. Spring 面试复习

    1   singleton 和 prototype singleton作用域:当把一个Bean定义设置为singleton作用域是,Spring IoC容器中只会存在一个共享的Bean实例,并且所有对 ...

  5. EasyuiAPI：基础

    一.EasyLoader(简单加载) locale属性:值类型是string locales属性:值类型是object 二.Draggable(拖动) 1.通过标签创建: <div id=&qu ...

  6. 转载---关于Spring的69个面试问答

    链接:http://www.importnew.com/11657.html 目录 Spring概述 依赖注入 Spring Beans Spring注解 Spring的对象访问 Spring面向切面 ...

  7. Spring3&period;x企业开发应用实战读书笔记 —— 第三章IoC容器概述

    声明:    本篇博客绝大多数内容为<Spring3.x企业开发应用实战>一书原内容,所有版权归原书作者所有!,仅供学习参考,勿作他用! 3.2 相关Java基础知识 Java语言允许通过 ...

  8. EF学习笔记（七）：读取关联数据

    总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 本篇参考原文链接:Reading Related Data 本章主要讲述加载显示关联数据: 数据加载分为以下三种 Lazy l ...

  9. web api HttpResponseMessage的简单使用

    using Lemon.Common; using Lemon.WeChat.Model; using Lemon.WeChat.Services; using Newtonsoft.Json; us ...

  10. paired-end reads的拼接

    paired-end reads的拼接 发表于2012 年 8 月 13 日 Velvet中paired-end reads的拼接 文件格式 要将两头测序(paired-end)的reads放到同一个 ...

相关文章