全选和全不选（管理员列表）----html文件

代码功能：
对每个选项进行选择，如果中间四个全选则自动定义为全选，如果点击删除选定按钮，则会撤销全部选择。
界面：

HTML代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择：全选、全不选</title></head><body><h2>管理员列表</h2><table border="1px"width="500px"><thead><tr><th><input type="checkbox" name="adminAll"onclick="checkAll(this)"/>全选</th><th>管理员ID</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox" name="adminID"onclick="checkSel(this)"/></td><td>1</td><td>Tester</td><td>修改 删除</td></tr><tr><td><input type="checkbox"name="adminID"onclick="checkSel(this)" /></td><td>2</td><td>Manager</td><td>修改 删除</td></tr><tr><td><input type="checkbox" name="adminID"onclick="checkSel(this)"/></td><td>3</td><td>Analyst</td><td>修改 删除</td></tr><tr><td><input type="checkbox" name="adminID"onclick="checkSel(this)"/></td><td>4</td><td>Admin</td><td>修改 删除</td></tr></tbody><tfoot><tr><th><input type="checkbox" name="adminAll"onclick="checkAll(this)"/>全选</th><th>管理员ID</th><th>姓名</th><th>操作</th></tr></tfoot></table><button onclick="deleteCheck()">删除选定</button><script>//全选处理function checkAll(chb){//根据全选的值修改所有的复选框var chbs=document.getElementsByName("adminID");for(var i=0;i<chbs.length;i++){chbs[i].checked=chb.checked;}//同步上下两个全选var chbAll=document.getElementsByName("adminAll");for(var i=0;i<chbAll.length;i++){chbAll[i].checked=chb.checked;}}//处理某一个复选框function checkSel(chb){var chbAll=document.getElementsByName("adminAll");//查找没有选中的数量var unchb=document.querySelectorAll("table>tbody td:first-child>input:not(:checked)");if(unchb.length==0){//空集合时false，说明返回空集合说明都被选中for(var i=0;i<chbAll.length;i++){chbAll[i].checked=true;}}else{for(var i=0;i<chbAll.length;i++){chbAll[i].checked=false;}}//!!!此处多了一个}，故多次，运行不报错，但结果出错}//全不选 function deleteCheck(){var chbs=document.getElementsByName("adminID");for(var i=0;i<chbs.length;i++){chbs[i].checked=false;  }var chbAll=document.getElementsByName("adminAll");for(var i=0;i<chbAll.length;i++){chbAll[i].checked=false;}}</script></body>
</html>

JavaScript代码可以自行创建一个文件，我创建在html中了，都是可以运行的。

全选和全不选（管理员列表）----html文件相关推荐

vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
html购物车总价,最完美的购物车页面js，可全选，计算总价，传列表套字典。
购物车功能产品一单价10 数量1 产品二单价20 数量2 产品三单价30 数量3 产品四单价40 数量4 合计:￥0 全选结算 // 全选/反选功能 $('#allcheck').cli ...
php 列表全选,php处理全选与全不选的实例代码
php处理复选框checkbox的全选与全不选. 代码: 复制代码代码示例: php处理复选框checkbox的全选与全不选-www.jbxue.com function check_all() { ...
html页面列表一键全选选,JQuery控制Html页面Checkbox全选和全不选
说明:Checkbox的全选和全不选应用较为普遍,网上的资料大多数都是原生JS的实现方式,大家你超我,我超你,没意思!今天用JQuery试着写了一下,采用了新的角度实现,供大家参考一下,直接上代码,解 ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
前端小demo——全选和全不选
模拟购物车,实现全选或者全不选,或者其中任意一件单品单选的效果. 点击顶部复选框实现全选列表中任意一项未选中,顶部复选框就是未选中的状态 <!DOCTYPE html> <html ...
关于微信小程序的多选和全选实现
效果简述今天实现了一个小程序版的仿后端管理界面的多选和全选checkbox,大致思路如下实现 wxml  <checkbox-group bindch ...
android 全选功能,Android实现ListView控件的多选和全选功能实例
本文实例讲述了Android实现ListView控件的多选和全选功能.分享给大家供大家参考,具体如下: 主程序代码 MainActivity.Java package yy.test; import ...
经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...

全选和全不选（管理员列表）----html文件

全选和全不选（管理员列表）----html文件相关推荐

最新文章

热门文章