这是我写的关于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>
时间： 2024-11-08 15:12:40