checkbox管理

最新推荐文章于 2024-09-02 17:34:07 发布

weixin_34040079

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量47

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanhui66/p/6953940.html

版权

这是我写的关于checkbox的管理的方法；

主要目的是1.管理checkbox全选，单个选的状态；（例如当所有的单个选框都选中时，全选框的状态应该是选中，）

2.选中，取消选中时更新数据；

目的：

实现批量操作（批量删除，批量修改）时的状态管理；

并不完善；而且感觉这样做不好；但是技术有限，想不出其他方法了；

如果哪位大神路过，还望指导一下。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    全选<input type="checkbox" id="checkAll" />
    <br />
    选项一<input type="checkbox" id="1" class="checkList" /><br>
    选项二<input type="checkbox" id="2" class="checkList" /><br>
    选项三<input type="checkbox" id="3" class="checkList" /><br>
    选项四<input type="checkbox" id="4" class="checkList" /><br>
    选项五<input type="checkbox" id="5" class="checkList" /><br>
    选项六<input type="checkbox" id="6" class="checkList" />
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    var checkBox = {
        cache: [],
        addOrDeteleOne: function ($targetAll, $targetList) {
                var _self = this; 
            $targetList.on('click', function (event) {
                var $tr_id = $(this).attr('id');
                console.log($(this).is(':checked'));
                if ($(this).is(':checked')) {
                   _self.cache.push($tr_id);
                } else {
                        _self.cache.remove($tr_id);              
                }
                _self.checkAllState($targetAll, $targetList);
                console.log(_self.cache);
            });
        },
        addOrDeleteAll: function ($targetAll, $targetList) {
                var _self = this;
            $targetAll.on('click', function (event) {
                if (!$(this).is(':checked')) {
                   
                    $targetList.prop('checked', false);
                    _self.cache.splice(0, _self.cache.length);
                } else {
                        $targetList.prop('checked', true);
                        $targetList.each(function (i, ele) {
                            if (_self.cache.indexOf($(ele).attr('id')) === -1) {
                                _self.cache.push($(ele).attr('id'));    
                            }
                        });
                
                }
                console.log(_self.cache);
            })
        },
        checkAllState: function ($targetAll, $targetList) {
            $targetList.each(function (j, elem) {
                if (!$(elem).is(':checked')) {
                    $targetAll.prop('checked', false);
                    return false;
                } else {
                    $targetAll.prop('checked', true);
                }
            })
        },
        empty: function () {
            
        }
    };
　　//方法调用
    checkBox.addOrDeteleOne($('#checkAll'), $('.checkList'));
    checkBox.addOrDeleteAll($('#checkAll'), $('.checkList'));
    
</script>
</html>

转载于:https://www.cnblogs.com/hanhui66/p/6953940.html

weixin_34040079

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox管理

这是我写的关于checkbox的管理的方法；主要目的是1.管理checkbox全选，单个选的状态；（例如当所有的单个选框都选中时，全选框的状态应该是选中，）2.选中，取消选中时更新数据；目的：实现批量操作（批量删除，批量修改）时的状态管理；并不完善；而且感觉这样做不好；但是技术有限，想不出其他方法了；如果哪位大神路过，还望指导一下。<!doctype html...
复制链接

扫一扫