jQuery全选反选插件 

(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插件，根据项目需求进行插件的修改，如根据选择的数量来进行是否选中。

 

posted on 2017-11-28 10:35  薛伟杰  阅读(151)  评论(0)  编辑  收藏  举报

导航