javascript实现复选框全选和取消代码下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > javascript实现复选框全选和取消代码下载

复选框是常用的元素之一，而点击实现全选和取消全选又是最为常用的功能，特别是在批量操作管理中，非常的方便，下面就通过代码实例介绍一下如何实现此效果，代码实例如下:

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>复选框的全选和取消代码-51前端</title> 
<script type="text/javascript">
window.onload=function(){
  var ckall=document.getElementById("control");
  var cks=document.getElementsByName("ck");
  var title=document.getElementById("title");
  ckall.onclick=function(){
    for (var i=0;i<cks.length;i++){
      if(ckall.checked==true){
        cks[i].checked=true;
        title.innerHTML="取消";
      }
      else{
        cks[i].checked=false;
        title.innerHTML="全选";
      }
    }
  }
}
</script>
</head>
<body>
<form id="form1">
  <input type="checkbox" id="control" />
  <span id="title">全选</span>
  <div id="box">
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
  </div>
</form>
</body>
</html>

代码描述：javascript复选框全选和取消。javascript实现复选框全选和取消代码下载

下载全部收藏

147 195

用户评论

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