JS实现全选、反选、不选
JS实现全选、反选、不选
效果图:
代码如下,复制即可使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){//全局加载
var oi = document.getElementById("oi");//全选按钮获取节点
var po = document.getElementById("po");//单选按钮获取节点
var yu = document.getElementById("yu");//反选按钮获取节点
var inp = document.getElementsByTagName("input");
oi.onclick = function(){//全选按钮加载点击事件 for(var i = 0;i < inp.length;i++){//全选按钮循环 小于按钮和的全选中 按钮个数和为i
inp[i].checked = true;//按纽的属性值小于按钮个数是=(真)true
}
}
po.onclick = function(){
for(var i = 0;i < inp.length;i++){
inp[i].checked = false;
}
}
yu.onclick = function(){ for(var i= 0;i < inp.length;i++){
if( inp[i].checked == true){
inp[i].checked = false;
}else {
inp[i].checked = true;
}
}
} }
</script>
</head>
<body>
<input type="checkbox" value="足球" name="1" /><br/>
<input type="checkbox" value="足球" name="2" /><br/>
<input type="checkbox" value="足球" name="3" /><br/>
<input type="checkbox" value="足球" name="4"/><br/>
<input type="checkbox" value="足球" name="5" /><br/>
<input type="checkbox" value="足球" name="6" /><br/>
<input type="checkbox" value="足球" name="7" /><br/>
<input type="checkbox" value="足球" name="8" /><br/>
<input type="checkbox" value="足球" name="9" /><br/>
<input type="checkbox" value="足球" name="0" /><br/>
<input type="button" value="全选" id="oi"/>
<input type="button" value="不全选" id="po"/>
<input type="button" value="反选" id="yu"/>
</body>
</html>
如有错误,欢迎联系我改正,非常感谢!!!
JS实现全选、反选、不选的更多相关文章
- JQ实现复选框的全选反选不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- wpf--------------datagrid全选反选 多选进行删除操作 前后台
前台绑定 <DataGrid.Columns> <DataGridTemplateColumn > <DataGridTemplateColumn.HeaderTempl ...
- Android开发 ---基本UI组件5:监听下拉选项,动态绑定下拉选项、全选/反选,取多选按钮的值,长按事件,长按删除,适配器的使用,提示查询数据,activity控制多按钮
效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- JS实现全选、不选、反选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
- js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
随机推荐
- %1$s %1$d Android string (java & Android 格式化字符串)
1$s // String%1$d // int //R.string.old:<string name="old">我今年%1$d岁了</string> ...
- 解题:CQOI 2013 和谐矩阵
题面 踩踩时间复杂度不正确的高斯消元 首先可以发现第一行确定后就可以确定整个矩阵,所以可以枚举第一行的所有状态然后$O(n)$递推检查是否合法 $O(n)$递推的方法是这样的:设$pre$为上一行,$ ...
- luoguP2123 皇后游戏——微扰法的应用与排序传递性的证明
题目背景 还记得 NOIP 2012 提高组 Day1 的国王游戏吗?时光飞逝,光阴荏苒,两年 过去了.国王游戏早已过时,如今已被皇后游戏取代,请你来解决类似于国王游 戏的另一个问题. 题目描述 皇后 ...
- HDU--4607
题目: Park Visit 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4607 分析:求树的直径.所谓树的直径,指的是一棵树里任意两点之间的最远距 ...
- npm安装socket.io时报错的解决方法(npm WARN enoent ENOENT: no such file or directory, open '/usr/local/nodejs/bin/package.json')
执行 npm install socket.io安装时报错: [root@WEB node_modules]# npm install socket.ionpm WARN enoent ENOENT: ...
- ElasticStack系列之十四 & ElasticSearch5.x bulk update 中重复 id 性能骤降
目前在绝对多数公司在使用 ElasticSearch 将其当做数据库使用,将多个数据库中的数据同步到 ElasticSearch 索引是非常常见的应用场景.那么自然而然就会涉及到数据频繁的新增和更新, ...
- GO_03:GO语言基础语法
1. Go项目的目录结构 一般的,一个Go项目在GOPATH下,会有如下三个目录: project --- bin --- pkg --- src 其中,bin 存放编译后的可执行文件:p ...
- c++虚函数&重写
虚函数是C++中实现多态的一种方法,父类A的一个函数声明为虚函数,在子类B中覆盖定义之后,当在调用的时候使用A*a=new B(),此时调用对应的那个虚函数的名字,则会执行B中的函数.当父类中没有定义 ...
- php设计模式-工厂设计模式
概念: 工厂设计模式提供获取某个对象的新实例的一个接口,同时使调用代码避免确定实际实例化基类步骤. 很多高级模式都是依赖于工厂模式.
- LintCode 158: Anagram
LintCode 158: Anagram 题目描述 写出一个函数anagram(s, t)判断两个字符串是否可以通过改变字母的顺序变成一样的字符串. 样例 给出s = "abcd" ...