翻页时保存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         //删除一个值
100         _removeVal: function (val) {
101             var checkedVals = this.getCheckedValues();
102             for (var i = 0; i < checkedVals.length; i++) {
103                 if (checkedVals[i] == val) {
104                     checkedVals.splice(i, 1);
105                     break;
106                 }
107             }
108             $(this.option.cacheInput).val(checkedVals.join(','));
109         },
110
111         //获取选中的值
112         getCheckedValues: function () {
113             if (!$(this.option.cacheInput)[0] || $(this.option.cacheInput).val() == '') {
114                 return [];
115             }
116
117             return $(this.option.cacheInput).val().split(',');
118         }
119     };
120
121     window.ListCheckbox = ListCheckbox;
122 });

封装的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=" 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>

                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>

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