checkbox管理

Posted 流年之外

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了checkbox管理相关的知识,希望对你有一定的参考价值。

这是我写的关于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>

 

以上是关于checkbox管理的主要内容,如果未能解决你的问题,请参考以下文章

使用 Git 来管理 Xcode 中的代码片段

PullToRefreshListView 内嵌checkbox 数据丢失问题

massCode 一款优秀的开源代码片段管理器

如何管理在每个 git 版本中添加私有代码片段?

如何使用Android片段管理器传递变量[重复]

Android:使用支持片段管理器时复制片段