js(四) 全选/全不选和反选
思路：通过选择全选的选框的状态stuts 即true/false控制其他选框。
首先 我们要通过.checked方法获取选框（全选/全不选）的值。
function all(){
var stuts=document.getElementById("xuan").checked;
console.log(stuts);
}
此时控制台会打印选中（true）和不选中（false）的值。
通过getElementsName获取名字相同的checke选框成一个集合，在通过遍历集合更改每个选框的状态值。
c[i].checked=stuts;
反选就是让状态值相反即可
c[i].checked=!c[i].checked;
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="checkbox" name="c">1<br>
<input type="checkbox" name="c">2<br>
<input type="checkbox" name="c">3<br>
<input type="checkbox" name="c">4<br>
<input type="checkbox" name="c">5<br>
<input type="checkbox" name="c">6<br>
<input type="checkbox" name="c">7<br>
<hr> <input type="checkbox" id="xuan" onchange="a()">全选/全不选<br>
<input type="button" id="fan" onclick="fan()" value="反选"> <script>
function a() {
var stuts=document.getElementById("xuan").checked;
var c=document.getElementsByName("c");
for(var i=0;i<c.length;i++){
c[i].checked=stuts;
}
}
function fan() {
var stuts=document.getElementById("fan");
var c=document.getElementsByName("c");
for(var i=0;i<c.length;i++){
c[i].checked=!c[i].checked;
}
}
</script>
</body>
</html>
js(四) 全选/全不选和反选的更多相关文章
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于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 ...
- asp.net中Repeater结合js实现checkbox的全选/全不选
前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...
- js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 用 JS（JavaScript ）实现多选、全选、反选
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- js之checkbox的代码全选/全不选，使用id获取元素，而不是name
每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...
随机推荐
- DirectX11笔记(三)--Direct3D初始化代码
原文:DirectX11笔记(三)--Direct3D初始化代码 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article ...
- 如何解决IntelliJ在打包Maven项目时不打包配置文件
在pom文件中加上你的配置文件夹目录: <build> <resources> <resource> <directory>src/res</di ...
- 阿里云MVP：开发者的超能力，用技术创造更好世界
阿里云MVP:开发者的超能力,用技术创造更好世界 2019年3月,第8期阿里云MVP(最有价值专家)完成终审,截至目前,全球已有27个国家和地区.近500位云计算专家和优秀开发者成为阿里云MVP.阿里 ...
- Hdu 4597记忆化搜索
好久没有做题了,水平已经完全在学弟之下了. 一个吉林邀请赛最水的题目.:( 其实这题一看到数据范围,只可以想到思路,直接爆搜,加个记忆化. 这题虽然A了,但是我还是没太想清楚一些边界情况,心虚着A了. ...
- SPSS统计分析过程包括描述性统计、均值比较、一般线性模型、相关分析、回归分析、对数线性模型、聚类分析、数据简化、生存分析、时间序列分析、多重响应等几大类
https://www.zhihu.com/topic/19582125/top-answershttps://wenku.baidu.com/search?word=spss&ie=utf- ...
- Spring CommonsMultipartResolver上传文件小结
自从业至今,文件上传与IO流之类的调用,一直是理解比较模糊的地方,大多就这网上搜到的资料抄抄改改草草了事,内部原理一直不甚了解,今日我们通过Spring的CommonsMultipartResolve ...
- docker--docker基本命令使用及发布镜像
docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...
- Python学习之路5☞文件处理
一.文件处理流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 正趣果上果 Interesting fruit fruit 词:郭婞 曲:陈粒 编曲/混音/和声:燕池 萧: ...
- sql函数的使用——转换函数
转换函数用于将数据类型从一种转为另外一种,在某些情况下,oracle server允许值的数据类型和实际的不一样,这时oracle server会隐含的转化数据类型,比如: create table ...
- @游记@ CSP2019
目录 @day -??@ @day -1@ @day 0@ @day 1@ @day 2@ @day ??@ @day ??+1@ @day -??@ 和 yhn 学长在校外偶遇. 聊了一些.他说现在 ...