js实现checkbox全选与反选
<script type="text/javascript" language="javascript">
function checkAll(id,name)//此方法用来全选和全消复选框
{ var items=document.getElementsByName(name);
var itemall=document.getElementById(id);
for(var i=0;i<items.length;i++){
items[i].checked=itemall.checked;
}
}
function resAll(id,name){
var items=document.getElementsByName(name);
var itemall=document.getElementById(id);
var ite=0; //此变量用来记录当前选中的checkbox的个数
for(var i=0;i<items.length;i++){
//获得当前选中的checkbox的数量
if(items[i].checked){
ite++;
}
}
//如果当前选中的数量为有一个没有选中,并且全选框是选中状态
//则将全选框的状态变为不选择
if(ite==items.length-1&&itemall.checked){
itemall.checked=false;
}
/*---
//这个适用于你想把子选项完全去掉才将全选的效果去掉
if(ite==0&&itemall.checked){
itemall.checked=false;
}
---*/
//如果当前选中的数量为零并且全选框是未选中状态
//则将全选框的状态变为选择
if(ite==items.length&&!itemall.checked){
itemall.checked=true;
}
}
</script>
html部分
广告位位置: 全部:<input type="checkbox" id="checkall" onclick="checkAll('checkall','position[]')">
首页:<input type="checkbox" name="position[]" value="index" onclick="resAll('checkall','position[]')">
分类页:<input type="checkbox" name="position[]" value="category" onclick="resAll('checkall','position[]')">
详情页:<input type="checkbox" name="position[]" value="detail" onclick="resAll('checkall','position[]')">
播放页: <input type="checkbox" name="position[]" value="play" onclick="resAll('checkall','position[]')"><br />
终端: 全部:<input type="checkbox" id="check" onclick="checkAll('check','terminal[]')">
网络:<input type="checkbox" name="terminal[]" value="net" onclick="resAll('check','terminal[]')">
机顶盒:<input type="checkbox" name="terminal[]" value="stb" onclick="resAll('check','terminal[]')">
移动:<input type="checkbox" name="terminal[]" value="mobile" onclick="resAll('check','terminal[]')">
js实现checkbox全选与反选的更多相关文章
- js解决checkbox全选和反选的问题
function SelectAll() { var checkboxs=document.getElementsByName("chk_list"); for (var i=0; ...
- checkbox全选,反选,取消选择 jquery
checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...
- checkbox全选与反选
用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...
- angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
- Checkbox 全选、反选
1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></t ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- checkbox 全选,反选 ,全不选
在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...
- 练习-checkbox 全选 ,反选, 单选,以及取值
1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- jquery一键控制checkbox全选,反选,全不选。
jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法. Hml的checkbox没有加name,只用了 div 嵌套. 如有更好的方法,望指点!! //全选 ...
随机推荐
- Struts+Spring+Hibernate进阶开端(一)
入行就听说SSH,起初还以为是一个东西,具体内容就更加不详细了,总觉得高端大气上档次,经过学习之后才发现,不仅仅是高大上,更是低调奢华有内涵,经过一段时间的研究和学习SSH框架的基本原理与思想,总算接 ...
- 【干货】.NET开发通用组件发布(四) 日志记录组件
组件介绍和合作开发 http://www.cnblogs.com/MrHuo/p/MrHuoControls.html 日志记录组件功能介绍 通过基类Logger,实现了文本记录日志和数据库记录日志两 ...
- Flask学习记录之Flask-SQLAlchemy
Flask-SQLAlchemy库让flask更方便的使用SQLALchemy,是一个强大的关系形数据库框架,既可以使用orm方式操作数据库,也可以使用原始的SQL命令. Flask-Migrate ...
- Android 文件操作之openFileOutput
openFileOutput()方法的第一参数用于指定文件名称,不能包含路径分隔符“/” ,如果文件不存在,Android 会自动创建它.创建的文件保存在/data/data/<package ...
- hdu 1116 Play on Words
http://acm.hdu.edu.cn/showproblem.php?pid=1116 欧拉通路和欧拉回路 #include <cstdio> #include <cstrin ...
- BZOJ 1090 字符串折叠(区间DP)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1090 题意:字符串AAAAAAAAAABABABCCD的最短折叠为9(A)3(AB)CC ...
- 【转】兼容性测试套件(CTS)框架用户手册
原文网址:http://blog.sina.com.cn/s/blog_416166e90102v6bi.html 兼容性测试套件(CTS)框架用户手册 1.为什么需要兼容性测试(以下称CTS)? 2 ...
- 方案:手动升级WordPress系统
对于WordPress系统及时进行更新维护是十分必须的操作,更新维护不仅可以更新系统服务功能,还能够完善安全系统. 如果你是虚拟主机的用户,可以使用FTP账户进行自动更新服务,但是如果你是V ...
- android 缓存Bitmap - 开发文档翻译
由于本人英文能力实在有限,不足之初敬请谅解 本博客只要没有注明“转”,那么均为原创,转贴请注明本博客链接链接 Loading a single bitmap into your user interf ...
- 【转】Windows与Linux(Ubuntu)双系统时间不一致的解决方法
当在嵌入式Linux里面备份文件时候,在备份的时候,PC(win7)和开发板的时间都是9:30,但是在开发板发现文件创建时间是9:30,然后u盘插在PC(win7)上,发现文件创建时间是1:30,为什 ...