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管理的主要内容，如果未能解决你的问题，请参考以下文章