使用js实现全选功能。(全选,全不选,反选)
作业210721
提交代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选反选全不选</title>
</head>
<body>
<!-- 选择框 -->
<input type="Checkbox" name="box" onclick="selectAll()" value="1" />吃饭<br />
<input type="Checkbox" name="box" onclick="selectAll()" value="2" />喝酒<br />
<input type="Checkbox" name="box" onclick="selectAll()" value="3" />抽烟<br />
<input type="Checkbox" name="box" onclick="selectAll()" value="4" />烫头<br />
<input type="Checkbox" name="box" onclick="selectAll()" value="5" />打牌<br />
<!-- 功能按钮 -->
<input id="All" type="button" value="全选" onclick="All">
<input id="None" type="button" value="全不选" onclick="None">
<input id="Fan" type="button" value="反选" onclick="Fan">
<script type="text/javascript">
var All = document.getElementById('All');
var None = document.getElementById('None');
var Fan = document.getElementById('Fan');
var boxes = document.getElementsByName("box"); //获取页面的选择框
//全选
All.onclick = function() {
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = true;
//checked属性取true
}
}
// 全不选
None.onclick = function() {
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = false;
//checked属性取false
}
}
//2反选
Fan.onclick = function() {
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = !boxes[i].checked;
//checked属性取反
}
}
</script>
</body>
</html>
使用js实现全选功能。(全选,全不选,反选)的更多相关文章
- checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果
前台代码 01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head runat="server&q ...
- JS实现全选功能
000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
- vue.js实战——购物车练习(包含全选功能)
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- jQuery实现的全选、反选和不选功能
适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...
- S全选功能代码
JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...
- jQuery实现全选与全不选功能
初始时: 实现功能后: 实现该功能的核心代码: <script> $(function(){ $("#selectBtn").click(function(){ con ...
随机推荐
- QTreeView 使用 QStandardItemModel
QTreeView 使用 QStandardItemModel @ 目录 QTreeView 使用 QStandardItemModel 前言 一.直接上图 二.添加同级结点项 1.思路 2.实现 二 ...
- MySQL密码复杂度策略
前言 MySQL5.6.6版本之后增加了密码强度验证插件validate_password,相关参数设置的较为严格.使用了该插件会检查设置的密码是否符合当前设置的强度规则,若不满足则拒绝设置. 本文采 ...
- 第三方模块npm
npm介绍 npm 全名 node package manager node包管理工具,增删查改 如果npm操作太慢,可以安装npm镜像 npm的下载 比如全局下载一个jquery文件,全局下载的 ...
- 对ES6中类class以及实例对象、原型对象、原型链之间关系的详细总结
1. 类 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后用这个类来实例化对象.即类的用途:实例化对象. // 创建一个Person类 class Person { } // ...
- nginx日志分析及其统计PV、UV、IP
一.nginx日志结构 nginx中access.log 的日志结构: $remote_addr 客户端地址 211.28.65.253 $remote_user 客户端用户名称 -- $time_l ...
- 6-x3 declare和typeset命令:设置变量属性
declare 和 typeset 都是 Shell 内建命令,它们的用法相同,都用来设置变量的属性.不过 typeset 已经被弃用了,建议使用 declare 代替.declare 命令的用法如下 ...
- Nacos实战一:架构及部署
2018年,阿里巴巴开源 Nacos,由此成为继 Eureka.Consul.Apollo 等服务注册发现&配置的又一开源框架,到如今2021年,Nacos 已经历了 0.01->1.4 ...
- YAOI Round #5 题解
前言 比赛链接: Div.1 : http://47.110.12.131:9016/contest/13 Div.2 : http://47.110.12.131:9016/contest/12 D ...
- C语言:位运算符
异或 ^ 两个二进制位相同结果为0:不相同结果为1 1^1=0 1^0=1 0^1=1 0^0=1 按位或 | 两个二进制位 ...
- Scala学习——基础入门
基础语法 1)注意点 1)区分大小写 - Scala是大小写敏感的,这意味着标识Hello 和 hello在Scala中会有不同的含义. 2)类名 - 对于所有的类名的第一个字母要大写. 3)方法名 ...