• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • YouClaw
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
寻找乌托邦
博客园    首页    新随笔    联系   管理    订阅  订阅

全选与全部选

下面的代码是关于全选与全部选的案例:仅供参考

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<thead id="th">
<tr>
<th><input type="checkbox" id="ckall"></th>
<th>姓名</th>
<th>籍贯</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>中国香港</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>东北</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>中国台湾</td>
</tr>
</tbody>
</table>
<script>
var ckall = document.getElementById('ckall');

var cks = document.getElementById('tb').getElementsByTagName('input');

ckall.onclick = function(){
for(var i = 0;i < cks.length; i++){
cks[i].checked = this.checked;
}
}

for(var i=0;i<cks.length;i++){
cks[i].onclick = function(){
var flag = true;
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
flag = false;
break;
}
}
ckall.checked = flag;
}
}
</script>
</body>
</html>

posted @ 2018-11-12 17:01  寻找乌托邦  阅读(101)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3