js实现checkbox复选框反选效果代码实例

本章节介绍一下如何实现复选框的反选效果，下面就通过代码实例介绍一下如何实现此效果。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
div,ul{
  font-size:12px;
  list-style:none;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var ulcks=obox.getElementsByTagName("input");
  var ock=document.getElementById("ck");
  var oshow=document.getElementById("show");
  var obt=document.getElementById("bt");
    
  ock.onclick=function(){
    if(this.checked==true){
      for(var index=0;index<ulcks.length;index++){
        ulcks[index].checked=true;
      }
      oshow.innerHTML="取消";
    }
    else{
      for(var index=0;index<ulcks.length;index++){
        ulcks[index].checked=false;
      }
      oshow.innerHTML="全选";
    }
  }
  obt.onclick=function(){
    for(var index=0;index<ulcks.length;index++){
      ulcks[index].checked?ulcks[index].checked=false:ulcks[index].checked=true;
   }
  }
}
</script> 
</head> 
<body>
<ul id="box">
  <li><input type="checkbox"/>51前端欢迎您，只有努力奋斗才会有美好的未来。</li>
  <li><input type="checkbox"/>没有人一开始就是高手，比如一步步的努力才行。</li>
  <li><input type="checkbox"/>每一天都是新的，要好好的真心。</li>
  <li><input type="checkbox"/>只有当下的时间才是真实的，下一秒都是虚幻的。</li>
  <li><input type="checkbox"/>分享和互助是进步的最大源动力。</li>
  <li><input type="checkbox"/>虽然道路是曲折的，但是前途也不一定是不光明的，但是希望总会有的</li>
</ul>
<div>
  <input type="checkbox" id="ck"/>
  <span id="show">全选</span>
  <input type="button" id="bt" value="反选"/>
</div>
</body>
</html>

代码描述：js实现checkbox复选框反选。js实现checkbox复选框反选效果代码实例

下载全部收藏

128 171

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册