兼容IE8的全选功能

Posted maochunhong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了兼容IE8的全选功能相关的知识,希望对你有一定的参考价值。

在自己写的几个项目中都用到了全选功能,一开始偷懒想自己网上找个用下就行,谁知到局限太多了,有的不兼容ie8有的又太复杂,索性自己写了,代码很简单一看就理解

html如下

<div>
  <div  class="div"><input type="checkbox"  id="allchecked"><span>全选</span></div>
  <ul class="ul">
    <li><input  type="checkbox"><span></span></li>
    <li><input  type="checkbox"><span></span></li>
    <li><input  type="checkbox"><span></span></li>
    <li><input  type="checkbox"><span></span></li>
    <li><input  type="checkbox"><span></span></li>
    <li><input  type="checkbox"><span></span></li>
  </ul>
</div>
<script src="jquery-1.8.3.min.js"> </script>

<script>
$("#allchecked").click(function(){
  var status=this.checked;
  //var status=$(‘.div input[type=checkbox]‘).is(‘:checked‘)jquery方法 与上面的一样
  $(".ul input[type=checkbox]").prop("checked",status);
})
$(".ul input[type=checkbox]").click(function(){
  if($(".ul input[type=checkbox]:checked").length==$(".ul input[type=checkbox]").length){
    $(".div input[type=checkbox]").prop("checked",true);
  }else{
    $(".div input[type=checkbox]").prop("checked",false);
  }
})
</script>

如图

技术分享图片技术分享图片

注意 最好不要用attr,

prop和attr的区别如下:

  html元素本身就带有的固有属性使用prop方法对 checked selected disabled进行修改

  html元素自定义的属性 使用attr方法

 

要是有更加简洁的写法欢迎告知

























以上是关于兼容IE8的全选功能的主要内容,如果未能解决你的问题,请参考以下文章

覆盖内网兼容模式 IE8

兼容IE8以下,获取className节点的元素(document.getElementsByClassName()兼容写法)。

window.getComputedStyle能够获取元素的实际样式,但是低版本的ie8及以下不支持,如何在低版本的ie上兼容类似的功能

d3js在ie8兼容模式怎么设置

IE系列浏览器兼容性测试点整理

√实用总结ie浏览器兼容性适配点