zoukankan      html  css  js  c++  java
  • 一个简单的全选Jquery插件

    在实际开发中全选操作会经常用到,这里简单的写了个Jquery的全选插件,方便以后直接调用

    /*
    * jQuery lightweight plugin CheckAll
    * Original author: Suifengshiqu
    * Further changes, comments: lvbo1988@gmail.com
    */
    
    /* 表格全选插件 */
    
    /* 使用方法 */
    /*
        $("#tab").CheckAll({ valueField: "txtTest",attrName: "Id", chkId: "chkall", splitExp: "|", valueIndex: 0 });
    */
     
    (function ($) {
        $.fn.extend({
            CheckAll: function (options) {
                var defaults = {
                    valueField: null,   //默认选中后的赋值字段
                    chkId: "c_all",     //全选框的Id
                    attrName: "id",     //取值属性
                    splitExp: "_",      //字段分隔符号
                    valueIndex: 1       //分割后取值的索引下标
                };
                var options = $.extend(defaults, options);
                var obj = $(this); //默认为table
                function _getSelectedValue() {
                    var values = "";
                    obj.find(":checked").each(function () {
                        //排除下拉菜单中的选中项和全选框
                        if (!$(this).is("option") && $(this).attr("id") != options.chkId) {
                            values += $(this).attr(options.attrName).split(options.splitExp)[options.valueIndex] + ",";
                        }
                    });
                    if (values.length > 0)
                        return values.substring(0, values.length - 1);
                    return values;
                }
                return this.each(function () {
                    if (obj.is("table")) {
                        var subExp = "#" + obj.attr("Id") + " :checkbox";
                        var chks = $(subExp + ":gt(0)");
                        var checkedCount = 0;
                        chks.each(function () {
                            $(this).click(function () {
                                if ($(this).attr("checked")) {
                                    checkedCount += 1;
                                } else {
                                    checkedCount -= 1;
                                }
                                if (checkedCount < chks.length) {
                                    $("#" + options.chkId).attr("checked", false);
                                } else {
                                    $("#" + options.chkId).attr("checked", true);
                                }
                                $("#" + options.valueField).val(_getSelectedValue());
                            });
                        });
                        $("#" + options.chkId).click(function () {
                            if ($(this).attr("checked")) {
                                $(subExp).attr("checked", true);
                                checkedCount = chks.length;
                            } else {
                                $(subExp).attr("checked", false);
                                checkedCount = 0;
                            }
                            $("#" + options.valueField).val(_getSelectedValue());
                        });
                    }
                });
            }
        });
    })(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>
        <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery.CheckAll.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#tab").CheckAll({ valueField: "txtTest" });
            });
        </script>
    </head>
    <body>
        <table id="tab">
            <tr>
                <td><input type="checkbox" id="c_all" /></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="c_1" /></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="c_2" /></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="c_3" /></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="c_4" /></td>
            </tr>
        </table>
        <input type="text" id="txtTest" />
        <span onclick="alert(txtTest.value);">查看选中项</span>
    </body>
    </html>
    

      

  • 相关阅读:
    python连接SMTP的TLS(587端口)发邮件python发邮件(带认证,587端口)202010
    JAVA抓取通过JS渲染的网站(动态)网页数据
    moviepy音视频剪辑:与大小相关的视频变换函数详解
    区块链知识博文1: 共识算法之争(PBFT,Raft,PoW,PoS,DPoS,Ripple)
    MoviePy v2.0.0.dev1尚不成熟,不建议大家使用
    区块链学习2:一些概念性的基础知识笔记
    老猿学5G:3GPP 5G规范中的URI资源概念
    区块链学习1:Merkle树(默克尔树)和Merkle根
    老猿Python博客文章目录索引
    老猿学5G:融合计费场景的Nchf_ConvergedCharging_Create、Update和Release融合计费消息交互过程
  • 原文地址:https://www.cnblogs.com/lvbo1988/p/2479448.html
Copyright © 2011-2022 走看看