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,因为那只能返回一个,而不是集合. ...
随机推荐
- JAVA的一次编译，到处执行，你知道多少？
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wangyongxia921/article/details/28117155 一.对AVA的迷茫 ...
- 使用淘宝镜像cnpm安装Vue.js
简介: Vue.js是前端一个比较火的MVVM框架, 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑 ...
- LintCode刷题笔记-- Count1 binary
标签: 位运算 描述: Count how many 1 in binary representation of a 32-bit integer. 解题思路: 统计一个int型的数的二进制表现形式中 ...
- kubernetes1.4新特性：增加新的节点健康状况类型DiskPressure
背景资料 在Kubernetes架构图中可以看到,节点(Node)是一个由管理节点委托运行任务的worker. 它能运行一个或多个Pods,节点(Node)提供了运行容器环境所需要的所有必要条件,在K ...
- 盘点Apache毕业的11个顶级项目
自1999年成立至今,Apache 软件基金会已成功建立起自己强大的生态圈.其社区涌现了非常多优秀的开源项目,同时有越来越多国内外项目走向这个国际开源社区进行孵化.据悉,目前所有的 Apache 项目 ...
- get请求url中带有中文参数出现乱码情况
在项目中经常会遇到中文传参数,在后台接收到乱码问题.那么在遇到这种情况下我们应该怎么进行处理让我们传到后台接收到的参数不是乱码是我们想要接收的到的,下面就是我的一些认识和理解. get请求url中带有 ...
- 如何在iPhone 显示一个 星级评分
http://blog.csdn.net/fanjunxi1990/article/details/8663914 由于项目需求,需要做一个列表,里面有各个商品的评分,就是app store里面所有a ...
- 2013年山东省第四届ACM大学生程序设计竞赛E题:Alice and Bob
题目描述 Alice and Bob like playing games very much.Today, they introduce a new game. There is a polynom ...
- 洛谷2387 BZOJ3669魔法森林题解
题目链接 BZ链接 这道题被很多人用spfa水了过去,表示很... 其实spfa很好卡,这组数据可以卡掉大多数spfa 链接:密码:rjvk 这里讲一下LCT的做法 我们按照a将边排序,然后依次添加 ...
- 解决Python操作MySQL中文乱码的问题
原始代码: import os, sys, string import MySQLdb MYSQL_HOST = 'localhost' MYSQL_PORT = ' MYSQL_USER = 'ro ...