翻页时保存Checkbox的选中状态

  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>

                            <td>
                                <%#Eval("PWD") %>
                            </td>

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

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