一个简单的全选Jquery插件

最新推荐文章于 2022-05-28 10:11:34 发布

zljpp

最新推荐文章于 2022-05-28 10:11:34 发布

阅读量132

点赞数

文章标签： web前端 jquery ViewUI

本文链接：https://blog.csdn.net/zljpp/article/details/84199917

版权

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

/* 
* jQuery lightweight plugin CheckAll 
* Original author: Suifengshiqu 
* Further changes, comments: lvbo1988@gmail.com 
*/  
  
/* 表格全选插件 */  
  
/* 使用方法 */  
/* 
    $("#tab").CheckAll({ valueField: "txtTest", chkId: "chkall", splitExp: "|", valueIndex: 0 }); 
*/  
  
(function ($) {  
    $.fn.extend({  
        CheckAll: function (options) {  
            var defaults = {  
                valueField: null,   //默认选中后的赋值字段  
                chkId: "c_all",     //全选框的Id  
                splitExp: "_",      //字段分隔符号  
                valueIndex: 1       //分割后取值的索引下标  
            };  
            var options = $.extend(defaults, options);  
            obj = $(this); //默认为table  
            function _getSelectedValue() {  
                var values = "";  
                $("#" + obj.attr("Id") + " :checked").each(function () {  
                    if ($(this).attr("id") != options.chkId) {  
                        values += $(this).attr("id").split(options.splitExp)[options.valueIndex] + ",";  
                    }  
                });  
                if (values.length > 0)  
                    return values.substring(0, values.length - 1);  
                return values;  
            }  
            return this.each(function () {  
                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 () {  
                    $(subExp).attr("checked", $(this).attr("checked") ? true : false);  
                    $("#" + options.valueField).val(_getSelectedValue());  
                });  
            });  
        }  
    });  
})(jQuery);  



页面调用如下：
[html] view plaincopy
<!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 οnclick="alert(txtTest.value);">查看选中项</span>  
</body>  
</html>

zljpp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的全选Jquery插件

在实际开发中全选操作会经常用到，这里简单的写了个Jquery的全选插件，方便以后直接调用/* * jQuery lightweight plugin CheckAll * Original author: Suifengshiqu * Further changes, comments: lvbo1988@gmail.com */ /* 表格全选插件 */ ...
复制链接

扫一扫