翻页时保存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="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" />

转载于:https://www.cnblogs.com/wanfeng/archive/2013/05/08/3066241.html