用JavaScript实现全选-反选
实现全选-反选
在日常生活我们会遇到需要全选-反选的地方，其实用JavaScript也能实现。
样式如下所示：
样式代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>全选-反选</title>
</head>
<body>
<h2>请选择您的兴趣爱好</h2>
<input type="checkbox" value="全选" id="chkAll"/><label for="chkAll">全选</label>
<input type="button" value="反选" id="reverse" />
<ul id="favors">
<li><input type="checkbox" value="" />打篮球</li>
<li><input type="checkbox" value="" />打篮球</li>
<li><input type="checkbox" value="" />看电影</li>
<li><input type="checkbox" value="" />看书</li>
<li><input type="checkbox" value="" />书法</li>
<li><input type="checkbox" value="" />唱歌</li>
<li><input type="checkbox" value="" />徒步旅行</li>
</ul>
</body>
</html>
JavaScript部分如下所示：
function $(id){
return document.getElementById(id);
}
window.onload = function(){
$("chkAll").onclick = function(){
var fvs = $("favors").getElementsByTagName("input");
for (var i = 0; i < fvs.length; i++) {
fvs[i].checked = $("chkAll").checked;
};
}
$("reverse").onclick = function(){
var ipts = $("favors").getElementsByTagName("input");
for (var i = 0; i < ipts.length; i++) {
ipts[i].checked = !ipts[i].checked;
};
}
var fvs = $("favors").getElementsByTagName("input");
for (var i = 0; i < fvs.length; i++) {
fvs[i].onclick = function(){
var isChkAll = true;
for (var i = 0; i < fvs.length; i++) {
if(!fvs[i].checked){
isChkAll = false;
break;
}
};
$("chkAll").checked = isChkAll;
}
};
}
用JavaScript实现全选-反选的更多相关文章
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- JavaScript下全选反选的Demo程序里实现checkmeonly函数 DOM
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript总结41:表格全选反选,经典案例详解
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
随机推荐
- composer 打印美化
{ "name": "brady_frmwork", "description":"php framwork", &qu ...
- go 多协程爬取图片
package main import ( "fmt" "github.com/antchfx/htmlquery" "golang.org/x/ne ...
- Model实体类
Model又叫实体类,这个东西,大家可能觉得不好分层.包括我以前在内,是这样理解的:UI<-->Model<-->BLL<-->Model<-->DAL ...
- Curl可以模拟浏览器
curl直接访问被拒绝 [22:10:00 root@C7 ~]#curl -I www.163.com HTTP/1.1 403 Forbidden Date: Wed, 24 Jun 2020 0 ...
- Git操作文件的时候手贱了，怎么恢复？
我们在使用git的过程当中很难避免的一点就是手贱,因为人嘛总有犯错疏忽的时候,有时候一不小心就操作错了.我也经常遇到这种情况,所以这时候对git的了解和掌握就非常重要,即使操作错了,我们也可以通过gi ...
- 如何使用 Azure Active Directory 认证和 Microsoft Graph 构建 Blazor Web 应用
如何使用 Azure Active Directory 认证和 Microsoft Graph 构建 Blazor Web 应用 英文原文:https://developer.microsoft.co ...
- 接收某项课程id，通过axios发起get请求，由于携带params出现的问题（已解决）
问题:在最新课程页面(NewBook.vue)点击某一项课程,通过传递该课程的 id 跳转至课程详情页(Bookdetail.vue),采取的跳转方式是声明式导航,即 <router-link ...
- NB-IoT的低功耗是怎么实现的？
NB-IoT的低功耗是怎么实现的? NB-IoT可以实现低功耗的一个主要原因就是NB-IoT设备的用户终端在省电模式下依然可以工作,这种工作模式可以极大的降低电量的消耗和延长电池使用寿命.在省电模式下 ...
- 公钥、私钥、SSL/TLS、会话密钥、DES
一,公钥私钥 1,公钥和私钥成对出现 2,公开的密钥叫公钥,只有自己知道的叫私钥 3,用公钥加密的数据只有对应的私钥可以解密 4,用私钥加密的数据只有对应的公钥可以解密 5,如果可以用公钥解密,则必然 ...
- JDK新特性-Lambda表达式的神操作
一.Lambda表达式的介绍 Lambda表达式是 Java8 中最重要的新功能之一.使用 Lambda 表达 式可以替代只有一个抽象函数的接口实现,告别匿名内部类,代码看 起来更简洁易懂.Lambd ...