html javascript checkbox实现全选功能
2024-08-29 10:11:38
html代码
<input type="checkbox" id="all" />all</input>
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input>
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input>
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input>
<input type="checkbox" class="one" onClick="funSelOne(this)"/>aa</input>
js代码:
$("#all").click(function(){ #给全选按钮添加点击事件,实现全选或全不选功能
var xz = $(this).prop("checked");
var ck = $(".one").prop("checked",xz);
}) function funSelOne(){ #关联全选按钮与子按钮,当任意一个子按钮没被选中时,全选按钮不被选中,当所有按钮都选中时,全选按钮也被选中
var one=$(".one");
var all=$("#all")[0]
var selCount=0;
var unSelCount=0;
for(var i=0;i<one.length;i++){
if(one[i].checked==true){selCount++;}
if(one[i].checked==false){unSelCount++;}
if(selCount==one.length){$('#all').prop("checked",true);}
if(unSelCount>0){$('#all').prop("checked",false);}
}
}
参考:https://www.cnblogs.com/xiaofox0018/p/6243723.html
https://blog.csdn.net/liuhailiuhai12/article/details/53815039
最新文章
- CSS 3学习——animation动画
- DotNet隐藏敏感信息操作方法
- 一步一步打造自己的Android图片浏览器(原创)
- http://blog.csdn.net/jiazimo/article/details/17265061
- C#的Timer
- Windows下搭建MySql Master-Master Replication
- 导入showb时候出错--2015-12-4
- Yii 的AR单行数据自动缓存机制
- UltraChart画柱状图上面显示数值
- Linux计划任务(转载)
- HDU 1544 Palindromes(回文子串)
- Android在包名称更改项目
- iOS特性
- Oracle数据库中直方图对执行计划的影响
- Java基础类库简介
- React笔记:组件(3)
- 【CSS】按钮的禁用与可用 CSS Cursor 属性
- npm后台启动nuxt服务之 kill
- PHP反序列化漏洞
- 自动升级CentOS Python至官方最新版