全选,全不选,反选的js实现
全选练习
** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true:选中
- checked=false:不选中
* 创建一个页面
** 复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作 全选和选不选,也有一个事件
** 三个按钮,分别有事件
- 全选
- 全不选
- 反选
* 全选操作
</head>
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type="text/javascript">
//实现全选和全不选
function selAllNo() {
/*
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件,checked==true
3、如果是选中,下面是全选
4、如果不是选中,下面是全不选
*/
//得到上面复选框
var box1 = document.getElementById("boxid");
//判断这个复选框是否是选择
if(box1.checked == true) { //是选择状态
//调用全选方法
selAll();
} else { //不是选中状态
//调用全不选方法
selNo();
}
} //实现反选的操作
function selOther() {
/*
1、获取到要操作的复选框
2、返回数组,遍历数组
3、得到每一个复选框 4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中,属性checked设置成false,否则,设置成true
*/
//获取要操作的复选框
var loves11 = document.getElementsByName("love");
//遍历数组
for(var a=0;a<loves11.length;a++) {
//得到每一个复选框
var love11 = loves11[a];
//判断当前这个复选框是什么状态
if(love11.checked == true) { //是选中的状态
//设置checked=false
love11.checked = false;
} else { //是不选中的状态
//把checked=true
love11.checked = true;
}
}
} //实现全不选的操作
function selNo() { /*
1、获取到要操作的复选框
2、返回的是数组,遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/
//得到要操作的复选框
var loves1 = document.getElementsByName("love");
//遍历数组
for(var j=0;j<loves1.length;j++) {
//得到每一个复选框
var love1 = loves1[j];
//设置属性的值checked = false;
love1.checked = false;
}
} //实现全选的操作
function selAll() {
/*
1、获取要操作的复选框
- 使用getElementsByName()
2、返回是数组,
- 属性 checked判断复选框是否选中
*** checked = true; //表示选中
*** checked = false;//表示不选中
- 遍历数组,得到的是每一个checkbox
* 把每一个checkbox属性checked=true
*/
//获取要操作的复选框
var loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; //得到每一个复选框
//设置属性是true
love1.checked = true;
}
} </script> </body>
全选,全不选,反选的js实现的更多相关文章
- JS实现全选、不选、反选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- js实现全选/全不选、反选
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js(四) 全选/全不选和反选
思路:通过选择全选的选框的状态stuts 即true/false控制其他选框. 首先 我们要通过.checked方法获取选框(全选/全不选)的值. function all(){ var stuts= ...
- jquery 全选 全不选 反选
1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- C#-数据库访问技术 ado.net——创建 数据库连接类 与 数据库操作方法 以及简单的数据的添加、删除、修改、查看
数据库访问技术 ado.net 将数据库中的数据,提取到内存中,展示给用户看还可以将内存中的数据写入数据库中去 并不是唯一的数据库访问技术,但是它是最底层的数据库访问技术 1.创建数据库,并设置主外键 ...
- 【CodeForces 567E】President and Roads(最短路)
Description Berland has n cities, the capital is located in city s, and the historic home town of th ...
- 新手Oracle安装及使用入门
一.安装Oracle Step1 下载oracle压缩包并解压到同一文件夹下面 Step2 双击setup.exe进行安装 Step3:进入如下界面配置: 邮箱可不填,去掉更新 除了设置密码,其他均可 ...
- 卸载移动硬盘出现 device is busy
umount /dev/sdb1 # device is busy fuser -m -v /dev/sdb1 # 查看 fuser -m -k /dev/sdb1 # 杀死进程
- TortoiseGit与GitHub项目关联设置
一.常规克隆GitHub上的项目: 1.在本地硬盘上放置项目的地方上[右键]->[Git 克隆]->在[url地址]上输入https的GitHub的链接,然后就是等待完成,之后即可完成拉取 ...
- 文件内容统计——Linux wc命令
有了该命令,就可以得到当前目录下所有符合条件的文件总数,如下: find -type f | wc -l 这个命令的功能也很好记,因为它功能很有限: wc -c filename:显示一个文件的字节数 ...
- CSS基础知识真难啊-background-渐变
文章参考 http://www.zhangxinxu.com/wordpress/?p=727 http://www.uqu8.com/html/2014/html-css_1105/176.html ...
- iOS应用第三方推送的添加
现在的一些第三方的推送平台挺好用,主要是因为他们有类似微信公众平台一样的管理后台,简单易用,封装了很多开发者需要的推送功能. 下面以个推为例: 1.在个推的应用配置iOS部分设置自己的BounleID ...
- RBD和AOF持久化对比
RDB和AOF持久化对比 Redis提供了RDB持久化和AOF持久化,本篇文章中将会对这两种机制进行一些对比 RDB机制的优势和略施 RDB持久化是指在指定的时间间隔内将内存中的数据集快照写入磁盘. ...
- POJ 2892 Tunnel Warfare
传送门 很神奇的一道题,可以用线段树搞,为了练习treap所以拿treap写了. 其实根据询问,删除那个标号就加入平衡树,然后找到最大的和最小的就好了. 一些很烦人的小细节. //POJ 2892 / ...