全选全部选,分页全选实现!

837 阅读2分钟
前言:本人后端java,因为在郑州工作,不得已要写前端(如果不是生活逼迫,谁愿意这么优秀~).分享一下. 

如果喜欢可以关注公众号:码农脱贫 (回复0713可领取java从入门到就业完整资料,还可以加小编微信,获取架构师,前端,pyhon等免费资料,小编要的就是你的一个关注)

一,先学习一下prop小知识:

1  	prop定义
prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时,则返回第一个匹配元素的值。
当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对
2	prop语法
 1返回属性的值 $(selector).prop(property)
2设置属性和值 $(selector).prop(property,value)3使用函数设置属性和值 $(selector).prop(property,function(index,currentvalue))
4设置多个属性和值 $(selector).prop({property:value,property:value,...})   
【参数解释:】
 property规定属性的名称
 value规定属性的值
 function(index,currentvalue)规定要返回设置属性值的函数。
             index检索集合元素中的位置;
             currentvalue检索被选元素当前的属性值;       

       
案例://全选与反选
$("#quanxuan").click(function(){
    //全选时(如果复选框是选择状态会返回true)
    if($("#xuanxuan").prop("checked")){
        //遍历循环体,并给每一行的复选框赋值为选中状态
        $("#xuanze").each(function(){
            $("#xuanze").prop("checked",true);
            //$("#xuanze").prop("checked","checked");
        });
    }else{
        //反选,遍历循环体
        $("#xuanze").each(function(){
            $("#xuanze").prop("checked",false);
            //$("#xuanze").prop("checked","");
        })
    }
})

二,学习一个each小知识

1 定义: each()方法规定为每一个匹配的元素规定运行的函数。

 2 语法: $(selector).each(function(index,element)) functon(index,element) 必需。为每个匹配的元素规定运行的函数。 index选择器的位置 element当前元素


升级版,加入前端缓存

全选复选框
<th style="text-align: center"><input type="checkbox" id="quanxuanpltj"></th>
循环体
<td style="text-align:center"><input type="checkbox" name="tzmxbh" class="xuanzepltj" value="${ydhz.tzmxbh}" onclick="getCheckedVal();"></td>

<script>
   //全选与反选
   $("#quanxuanpltj").click(function () {
      if ($("#quanxuanpltj").prop("checked")) {
         $(".xuanzepltj").each(function () {
            $(".xuanzepltj").prop("checked", true);
            getCheckedVal();
         });
      } else {
         $(".xuanzepltj").each(function () {
            $(".xuanzepltj").prop("checked", false);
            getCheckedVal();
         });
      }
   });

   //页面初始化
   $(document).ready(function () {
      debugger
      //把全选框设置为不选中
      $("#quanxuanpltj").prop('checked', false);           
      //在session中的值,设置为选中
      for (var j = 0; j < sessionStorage.length; j++) {
         var obj = $(".xuanzepltj");
         for (var i = 0; i < obj.length; i++) {
            var checkbox = obj[i];
            var aaa = "dzjcxt_"+checkbox.value;
            var bbbb=sessionStorage.key("dzjcxt_"+j);
            if (checkbox.value == sessionStorage.key(j)) {
               $("input[name='tzmxbh']").eq(i).prop('checked', 'true');
            }
         }
      }
   });

   //获取复选框选中,未选中的值,并且存储在session中
   function getCheckedVal() {
      //获取当前页面复选框
      var obj = $(".xuanzepltj");
      for (var i = 0; i < obj.length; i++) {
         var checkbox = obj[i];
         //var sss = checkbox.value;
         if (checkbox.checked) {
            //被选中的存在session中
            sessionStorage.setItem(checkbox.value, checkbox.value);
         } else {
            //未被选中的从session中清除
            sessionStorage.removeItem(checkbox.value);
         }
      }
   }
</script>





后续:关注小编公众号:码农脱贫(后台留言可以获取免费资料额)