基于jquery的跨页选中功能,在网上找了很久发现没有基于jquery的做法,所以自己写了一个出来

发布于:2022-10-15 ⋅ 阅读:(408) ⋅ 点赞:(0)
//所有需要回显的checked
//定义全局的变量ids,用来寸放已经选中的checked id,当切换页时,把ids中对应的checked回显,ids数组就起到记忆的作用
var ids = [];
//给单选按钮添加单击事件
$("#tBody").on("click","input[type='checkbox']",function () {
   //如果列表中的所有checkbox都选中,则"全选"按钮也选中
   if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
      $("#chckAll").prop("checked",true);
   }else{
       //如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
      $("#chckAll").prop("checked",false);
   }
   //this代表点击的checked
   var id = this.value;
             if (this.checked){
                 ids.push(id);
                 console.log(id+"添加成功");
             }else {
                 for (var i = 0; i < ids.length; i++) {
                     if (id == ids[i]){
                         ids.splice(i,1);
                         console.log(id+"删除成功");
                     }
                 }
             }
});
//给"全选"按钮添加单击事件
$("#chckAll").click(function () {
   //如果"全选"按钮是选中状态,则列表中所有checkbox都选中

   if(this.checked){
       //获取到没有选中的checked
                 var NotCheckedIds = $("#tBody input[type='checkbox']").not("input:checked");
                 for (var i = 0; i < NotCheckedIds.length; i++) {
                     ids.push(NotCheckedIds[i].value);
                     console.log(NotCheckedIds[i].value + " 添加成功");
                 }
             }else{
                 var checkedIds = $("#tBody input[type='checkbox']");
                 for (var i = 0; i < checkedIds.length; i++) {
                     for (var j = 0; j < ids.length; j++) {
                         if (checkedIds[i].value == ids[j]){
                             ids.splice(j,1);
                             console.log(checkedIds[i].value + " 删除成功");
                         }
                     }
                 }
             }
   $("#tBody input[type='checkbox']").prop("checked",this.checked);
});  
//回显的操作
function retCheckedView(ids) {
          var checkedIds = $("#tBody input[type='checkbox']");
          for (var i = 0; i < checkedIds.length; i++) {
              for (var j = 0; j < ids.length; j++) {
                  if(checkedIds[i].value == ids[j]){
                      checkedIds[i].checked = "true";
                  }
              }
          }
          //如果回显的checked处于全选状态,将把checkAll选中
          if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
              $("#chckAll").prop("checked",true);
          }
      }

下面的id就是要回显的

 

 

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到