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,因为那只能返回一个,而不是集合. ...
随机推荐
- Docker.[1].环境准备.
Docker.[1].环境准备. 环境描述: 在笔记本中安装了虚拟机,虚拟机中又安装了RedHat 7.x操作系统,然后在这个RedHat7.x的操作系统上,进行安装Docker. 虚拟机中的操作系统 ...
- [Vue CLI 3] 配置解析之 css.extract
大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...
- js将canvas保存成图片并下载
<canvas id="canvas" width="400" height="400"></canvas> < ...
- 【JZOJ4791】【NOIP2016提高A组模拟9.21】矩阵
题目描述 在麦克雷的面前出现了一个有n*m个格子的矩阵,每个格子用"."或"#"表示,"."表示这个格子可以放东西,"#" ...
- Spark-day01
Spark初始 什么是Spark Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎.Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室) ...
- Python Unittest根据不同测试环境跳过用例详解
虽然现在用的Katalon,不过这篇Unittest基本的用法讲的还是不错的 转自:https://mp.weixin.qq.com/s/ZcrjOrJ1m-hAj3gXK9TjzQ 本文章会讲述以下 ...
- php 明天，下个星期，时间函数
例子:<?php $nextWeek = time() + (7 * 24 * 60 * 60); // 7 days; 24 hours; 60 mins; 60secs echo 'Now: ...
- hdu2176 尼姆博弈
如果 a1^a2^a3........^an=0,必败态. 如果 a1^a2^a3........^an!=0,必胜态. 对于必胜态,若a1^a2^a3........^an=k,要让对方为必败态,所 ...
- 网络请求之jsonp封装
首先介绍下jsonp原理 浏览器因为同源策略的限制,在不同源的服务器通过我们传统axios是不能直接用来请求数据的(忽略代理),而src标签则不受同源策略的影响,所以我们需要动态的创建带有src的标签 ...
- sn图书spider
# -*- coding: utf-8 -*-import scrapyfrom copy import deepcopy class SnbookSpider(scrapy.Spider): nam ...