实现复选框全选/全不选切换
实现 切换 全选 复选框 全不选
2023-06-13 09:13:51 时间
<input type=checkbox name=mm value=a onclick="checkItem(this, "mmAll")"><br>
<input type=checkbox name=mm value=b onclick="checkItem(this, "mmAll")"><br>
<input type=checkbox name=mm value=c onclick="checkItem(this, "mmAll")"><br>
<input type=checkbox name=mm value=d onclick="checkItem(this, "mmAll")"><br>
<input type=checkbox name=mm value=e onclick="checkItem(this, "mmAll")"><br><br>
<input type=checkbox name=mmAll onclick="checkAll(this, "mm")">全选与不全选的切换
<script language=javascript>
function checkAll(e, itemName)
{
var aa = document.getElementsByName(itemName);
for (var i=0; i<aa.length; i++)
aa[i].checked = e.checked;
}
function checkItem(e, allName)
{
var all = document.getElementsByName(allName)[0];
if(!e.checked) all.checked = false;
else
{
var aa = document.getElementsByName(e.name);
for (var i=0; i<aa.length; i++)
if(!aa[i].checked) return;
all.checked = true;
}
}
</script>
ps:(当然若那个全选框是其它的控件比如是一个按钮,或者一个链接什么的话,那复选框里的 checkItem 点击事件可以去掉,以免出错)
<input type=checkbox name=mm value=b onclick="checkItem(this, "mmAll")"><br>
<input type=checkbox name=mm value=c onclick="checkItem(this, "mmAll")"><br>
<input type=checkbox name=mm value=d onclick="checkItem(this, "mmAll")"><br>
<input type=checkbox name=mm value=e onclick="checkItem(this, "mmAll")"><br><br>
<input type=checkbox name=mmAll onclick="checkAll(this, "mm")">全选与不全选的切换
<script language=javascript>
function checkAll(e, itemName)
{
var aa = document.getElementsByName(itemName);
for (var i=0; i<aa.length; i++)
aa[i].checked = e.checked;
}
function checkItem(e, allName)
{
var all = document.getElementsByName(allName)[0];
if(!e.checked) all.checked = false;
else
{
var aa = document.getElementsByName(e.name);
for (var i=0; i<aa.length; i++)
if(!aa[i].checked) return;
all.checked = true;
}
}
</script>
ps:(当然若那个全选框是其它的控件比如是一个按钮,或者一个链接什么的话,那复选框里的 checkItem 点击事件可以去掉,以免出错)
相关文章
- Mac下通过brew安装多个版本的go并实现切换
- OHEM的pytorch代码实现细节
- 实现个神经网络的3D可视化,美爆了!
- mac实现R版本的自动切换
- 基于 Caddy 部署盘古 Admin 实现流量网关
- Spring Boot 构建多租户系统 实现动态切换数据源
- 【Android Gradle 插件】组件化中的 Gradle 构建脚本实现 ② ( 组件化基本实现 | Project 相关目录 | 定义组件切换标志位 | 切换插件导入 | 切换设置应用 ID )
- Linux 进程通信之FIFO的实现
- 使用Oracle表变量实现数据批量处理(oracle表变量定义)
- MySQL中使用替换函数实现字符串替换(mysql替换函数)
- 切换用户:Linux轻松实现(切换linux用户)
- 运行如何在Linux中实现后台运行(linux切换后台)
- MySQL时间触发器:实现自动任务管理(mysql时间触发器)
- MySQL实现降序查询的技巧(mysql降序查询)
- 实现可靠的Redis主备切换(redis主备切换)
- 深入解析Linux逻辑块:了解文件系统存储的原理和实现。(linux逻辑块)
- MySQL中使用CASE语句进行条件判断和数据转换的实现方法(mysql中case语句)
- Linux下实现Oracle数据库的平稳切换(linux切oracle)
- 利用Redis实现高效数据缓存(数据缓存到redis)
- Redis集群分片迁移实现无缝切换(redis集群分片迁移)
- Redis 读写分离高效实现读写能力切换(redis 读写分离切换)
- 登录有效期利用Redis实现用户登录有效期控制(redis 设置用户)
- 用javascript实现的图片马赛克后显示并切换加文字功能
- 最简单的js图片切换效果实现代码
- 分页栏的web标准实现
- Java文件解压缩实现代码
- python使用pyhook监控键盘并实现切换歌曲的功能
- 使用javascript实现简单的选项卡切换
- destoon切换城市后实现logo旁边显示地区名称的方法
- jquery根据锚点offset值实现动画切换