翻页时保存Checkbox的选中状态

View Code 1 $(function () {
2 function ListCheckbox(option) {
3 var _defaultOption = {
4 allSelector: null,
5 itemSelector: null,
6 cacheInput: null
7 };
8 this.option = $.extend({}, _defaultOption, option);
9
10 this._init();
11 }
12
13 ListCheckbox.prototype = {
14 //初始化
15 _init: function () {
16 this._addEventListener();
17 this._setLoadChecked();
18 },
19 //添加事件监听
20 _addEventListener: function () {
21 var that = this;
22 $(this.option.allSelector).click(function (e) {
23 that._ckbAll_Change();
24 });
25 $(this.option.itemSelector).click(function (e) {
26 that._ckbItem_Change($(this));
27 });
28 },
29 //页面加载完设置选中
30 _setLoadChecked: function () {
31 var checkedVals = this.getCheckedValues();
32 if (checkedVals.length == 0) {
33 return;
34 }
35
36 for (var i = 0; i < checkedVals.length; i++) {
37 $(this.option.itemSelector + '[value="' + checkedVals[i] + '"]').attr('checked', true);
38 }
39
40 if ($(this.option.itemSelector).length == $(this.option.itemSelector + '[checked]').length) {
41 $(this.option.allSelector).attr('checked', true);
42 }
43 },
44 //选中所有checkbox改变
45 _ckbAll_Change: function () {
46 if ($(this.option.allSelector).attr('checked')) {
47 $(this.option.itemSelector).attr('checked', true);
48 this._addCurPageAll();
49 }
50 else {
51 $(this.option.itemSelector).attr('checked', false);
52 this._removeCurPageAll();
53 }
54 },
55 //单个checkbox改变
56 _ckbItem_Change: function (ckbItem) {
57 if ($(ckbItem).attr('checked')) {
58 this._addVal($(ckbItem).val());
59 }
60 else {
61 this._removeVal($(ckbItem).val());
62 }
63 },
64 //是否包含某值
65 _containsVal: function (val) {
66 var exists = false;
67 var checkedVals = this.getCheckedValues();
68 for (var i = 0; i < checkedVals.length; i++) {
69 if (checkedVals[i] == val) {
70 exists = true;
71 break;
72 }
73 }
74 return exists;
75 },
76 _addCurPageAll: function () {
77 var that = this;
78 $(this.option.itemSelector).each(function () {
79 that._addVal($(this).val());
80 });
81 },
82 //清除当前页面的所有值
83 _removeCurPageAll: function () {
84 var that = this;
85 $(this.option.itemSelector).each(function () {
86 that._removeVal($(this).val());
87 });
88 },
89 //添加一个值
90 _addVal: function (val) {
91 if (this._containsVal(val)) {
92 return;
93 }
94
95 var checkedVals = this.getCheckedValues();
96 checkedVals.push(val);
97 $(this.option.cacheInput).val(checkedVals.join(','));
98 },
99 //删除一个值
_removeVal: function (val) {
var checkedVals = this.getCheckedValues();
for (var i = 0; i < checkedVals.length; i++) {
if (checkedVals[i] == val) {
checkedVals.splice(i, 1);
break;
}
}
$(this.option.cacheInput).val(checkedVals.join(','));
},

//获取选中的值
getCheckedValues: function () {
if (!$(this.option.cacheInput)[0] || $(this.option.cacheInput).val() == '') {
return [];
}

return $(this.option.cacheInput).val().split(',');
}
};

window.ListCheckbox = ListCheckbox;
});封装的js对象使用方法：

注意：要创建 一个隐藏域服务器控件用保存选中的值

JS<script type="text/javascript">

var lstCkb; $(function(){

lstCkb = new ListCheckbox({
allSelector: '.ckbAll',
itemSelector: '.ckbItem',
cacheInput: $('input[id$="hfCheckedID"]')
}); });

function showCheckedValues(){

var vals=lstCkb.getCheckedValues();

alert(vals.length);

}

</script>

HTML<asp:Repeater ID="rptList" runat="server">
<HeaderTemplate>
<table>
<tr class="tr_h">
<th style="width: 40px;">
<input type="checkbox" class="ckbAll" />
</th>
<th>
用户名
</th>
<th>
密码
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<input type="checkbox" value="<%#Eval("ID") %>" class="ckbItem" />
</td>
<td>
<%#Eval("UserName") %>
</td> <td>
<%#Eval("PWD") %>
</td> </tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

<asp:HiddenField ID="hfCheckedID" runat="server" />