JS实例-全选练习
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<label for="checkedAllBox">你爱好的运动是？</label><input type="checkbox" id="checkedAllBox"/>全选/全不选
<br/>
<!--定义了复选框type="checkbox". 用户需要从若干给定的选择中选取一个或若干选项。-->
<label>
<input type="checkbox" name="items" value="足球"/>
足球
</label>
<label>
<input type="checkbox" name="items" value="蓝球"/>
蓝球
</label>
<label>
<input type="checkbox" name="items" value="羽毛球"/>
羽毛球
</label>
<label>
<input type="checkbox" name="items" value="乒乓球"/>
乒乓球
</label>
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
</body>
</html>
<script>
function myClick1(idStr,fun){
//全选/全不选框的地址
var checkedAllBox=document.getElementsByName("checkedAllBox");
// 全选按钮：点击按钮之后，四个多选框全都被选中
const btn=document.getElementById(idStr);
btn.onclick=fun;
}
// 全选框
myClick1("checkedAllBtn",function () {
var items=document.getElementsByName("items");
//items为一个数组，需要遍历
for(let i=0;i<items.length;i++){
//设置四个多选框变成选中状态
//通过多选框的checked属性获取或设置多选框的选中状态
items[i].checked=true;
}
checkedAllBox.checked=true;
});
// 全不选按钮：点击之后，四个多选框全都不被选中
myClick1("checkedNoBtn",function () {
var items = document.getElementsByName("items");
for(let i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
});
// 反选：点击之后选中的变成没选中，没选中的选中
myClick1("checkedRevBtn",function () {
var items=document.getElementsByName("items")
for(let i=0;i<items.length;i++){
/* if(items[i].checked===false){
items[i].checked=true;
}
else{
items[i].checked=false;
}*/
//反选时也需要判断四个多选框是否全部选中
items[i].checked=!items[i].checked;
checkedAllBox.checked=true;
//判断四个多选框是否全选,只要有一个没选中就不是全选
for(let j=0;j<items.length;j++) {
if (!items[j].checked) {
// 一旦进入判断，则证明不是全选状态
// 将checkedAllBox设置为没选中
checkedAllBox.checked = false;
}
}
}
/* checkedAllBox.checked=true;
for(let j=0;j<items.length;j++){
//判断四个多选框是否全选,只要有一个没选中就不是全选
if(!items[j].checked){
// 一旦进入判断，则证明不是全选状态
// 将checkedAllBox设置为没选中
checkedAllBox.checked=false;
break;
}
}*/
});
// 提交按钮:点击之后所有多选框的value属性值弹出
myClick1("sendBtn",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
if(items[i].checked===true){
alert(items[i].value)}}
});
//全选中或全不选中
myClick1("checkedAllBox",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
// items[i].checked=checkedAllBox.checked;
items[i].checked=this.checked;
}
});
/*如果四个多选框全都选中，则checkAllBox也应该选中
如果四个多选框全都不选中，则checkAllBox也应该不选中*/
//为四个多选框分别绑定点击响应函数
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
items[i].onclick=function () {
checkedAllBox.checked=true;
for(let j=0;j<items.length;j++){
//判断四个多选框是否全选,只要有一个没选中就不是全选
if(!items[j].checked){
// 一旦进入判断，则证明不是全选状态
// 将checkedAllBox设置为没选中
checkedAllBox.checked=false;
break;
}
}
}
}
</script>
JS实例-全选练习的更多相关文章
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 第十六篇 JS实现全选操作
JS实现全选 嗨,同学们好,老师这里是专门教同学解决一些针对性的问题,所以说综合起来,就要靠同学自己了. 这节课我们学一个很实用的东西,全选操作!比如淘宝这种商城对吧,我的购物车,我要全选购买,或 ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
- JS实现全选功能
000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...
- 一个js编写全选、弹出对话框、ajax-json的案例
js功能有:全选.弹出对话框.使用json传输ajax数据:不想在写多余的文字了,直接上代码: <%@ page language="java" contentType=&q ...
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
- php处理表单中的复选框问题以及js实现全选
做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...
- JS实现全选、不选、反选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
随机推荐
- 使用truncate ，截断有外键约束的父表
此时有两种方法,解决1.删除外键约束,删除该表,在重建外键约束--查询外键约束select TABLE_NAME,CONSTRAINT_NAME,CONSTRAINT_TYPE,R_CONSTRAIN ...
- 深度学习趣谈：什么是迁移学习？（附带Tensorflow代码实现）
一.迁移学习的概念 什么是迁移学习呢?迁移学习可以由下面的这张图来表示: 这张图最左边表示了迁移学习也就是把已经训练好的模型和权重直接纳入到新的数据集当中进行训练,但是我们只改变之前模型的分类器(全连 ...
- layui ：iframe 与 layer 的位置问题
最近有个项目是用 Layui 搭的,但是在layer的使用上遇到了问题. 简单的说,在父页面声明layer,在子页面中的子页面用window.parent调用那个父页面的layer. 讲道理应该是和i ...
- Unable to find a constructor that takes a String param or a valueOf() or fromString() method
Unable to find a constructor that takes a String param or a valueOf() or fromString() method 最近在做服务的 ...
- WEB前端常见受攻击方式及解决办法
一个网站建立以后,如果不注意安全方面的问题,很容易被人攻击,下面就讨论一下几种漏洞情况和防止攻击的办法. 一.SQL注入 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的 ...
- http与https的简单比较
一.概念 1.HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减 ...
- 如何使用Istio 1.6管理多集群中的微服务？
假如你正在一家典型的企业里工作,需要与多个团队一起工作,并为客户提供一个独立的软件,组成一个应用程序.你的团队遵循微服务架构,并拥有由多个Kubernetes集群组成的广泛基础设施. 由于微服务分布在 ...
- PHP XML DOM：DOM 是什么？
PHP XML DOM 内建的 DOM 解析器使在 PHP 中处理 XML 文档成为可能. DOM 是什么? W3C DOM 提供了针对 HTML 和 XML 文档的标准对象集,以及用于访问和操作这些 ...
- PHP array_shift() 函数
实例 删除数组中的第一个元素(red),并返回被删除的元素: <?php $a=array("a"=>"red","b"=> ...
- PHP strrpos() 函数
实例 查找 "php" 在字符串中最后一次出现的位置: <?php高佣联盟 www.cgewang.comecho strrpos("I love php, I l ...