js复选框实现全选、全不选、反选
复选框为checkbox对象
通过input就可以将一个简单的复选框呈现在页面上
<input type="checkbox" />
要实现的大概就是这样一个页面
思路
全选
因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同
反选
同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true
最上面的全选/全不选功能
通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false
注意
为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的
源代码如下
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>复选框</title> <style type="text/css"> </style>
</head> <body>
<input type="checkbox" id="boxid" onclick="setAllNo()" />全选/全不选
<br />
<input type="checkbox" name="love" />篮球
<br />
<input type="checkbox" name="love" />排球
<br />
<input type="checkbox" name="love" />羽毛球
<br />
<input type="checkbox" name="love" />乒乓球
<br />
<input type="button" value="全选" onclick="setAll()" />
<input type="button" value="全不选" onclick="setNo()" />
<input type="button" value="反选" onclick="setOthers()" /> <script type="text/javascript">
//全选函数
function setAll() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
loves[i].checked = true;
}
} //全不选函数
function setNo() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
loves[i].checked = false;
}
} //反选
function setOthers() {
var loves = document.getElementsByName("love");
for (var i = 0; i < loves.length; i++) {
if (loves[i].checked == false)
loves[i].checked = true;
else
loves[i].checked = false;
}
} //全选/全不选操作
function setAllNo(){
var box = document.getElementById("boxid");
var loves = document.getElementsByName("love");
if(box.checked == false){
for (var i = 0; i < loves.length; i++) {
loves[i].checked = false;
}
}else{
for (var i = 0; i < loves.length; i++) {
loves[i].checked = true;
}
}
}
</script> </body> </html>
例子2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选，反选按钮</title>
<script type="text/javascript">
window.onload=function(){
/*
*1 #checkedAllBtn
* 2 #checkedBoBtn
* 3 #checkedRevBtn
* 4 #sendBtn
* 5 #checkedAllBox
* 6 #items
* */ var checkedAllBtn = document.getElementById("checkedAllBtn");
//checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBtn.onclick = function(){ //获取四个多选框items
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = true; } //将checkedAllBox设置为选中状态
checkedAllBox.checked = true; }; //全不选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = false; } //将checkedAllBox设置为选中状态
checkedAllBox.checked = false; }; //反选 也要判断是否都需要全部选中
var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items'); checkedAllBox.checked = true; //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = !items[i].checked; if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false; } } }; //提交按钮
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName('items');
//遍历 items
for(var i=0; i<items.length;i++)
{
//判断多选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
}; checkedAllBox.onclick = function(){
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
items[i].checked = this.checked; } }; //items //如果四个多选框全都选中，则checkedAllBox也应该选中
//如果四个多选框都没选中，则checkedAllBox也应该没选中
var items = document.getElementsByName('items');
//为四个多选框分别绑定点击响应函数
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){ //将checkedAllBox设置为选中状态
checkedAllBox.checked = true; for(var j=0 ; j<items.length ; j++){
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
} } };
} } </script>
</head>
<body> <form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<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>
js复选框实现全选、全不选、反选的更多相关文章
- 复选框（checkbox）、多选框
1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...
- Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据
原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...
- jQuery对复选框（checkbox)的全选，全不选，反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- jQuery实现checkbox（复选框）选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- 复选框（checkox）全选、全不选、反选、获得选中项值的用例
HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...
- 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- checkbox 多选框 ：jquery之全选、全不选、反选
javascriptjqueryselectAll [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发
<input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
随机推荐
- RocketMQ顺序消息
rocketmq的顺序消息需要满足2点: 1.Producer端保证发送消息有序,且发送到同一个队列.2.consumer端保证消费同一个队列. 生产端: RocketMQ可以严格的保证消息有序.但这 ...
- Windows Ping | Tracert 's Bat 脚本并行测试
系统:windows 需求:测试多台PC输出三个网站并行ping.tracert结果,多台PC同时进行. 说明:以www.baidu.com.www.sina.com.cn.www.tencent.c ...
- Caffe---Pycaffe进行网络结构(xxx.prototxt)可视化
Pycaffe---进行网络结构(xxx.prototxt)可视化 解决网络结构(xxx.prototxt)可视化,还可以借助python接口,编写一个类似如下的pycaffe_draw_net.py ...
- c#客户端自动更新模块
一.概述 将需要更新的文件上传到服务器端,然后客户端从服务器下载更新文件并覆盖本地文件. 二.功能模块 1.将更新文件放入指定文件夹,检测更新,生成更新配置文件,并上传到服务器 2.获取服务器的更新配 ...
- MyBatis-12-动态SQL
12.动态SQL 什么事动态SQL:动态SQL就是指根据不同的条件生成不同的SQL语句 利用动态SQL这一特性可以彻底摆脱这种痛苦 动态 SQL 元素和 JSTL 或基于类似 XML 的文本处理器相似 ...
- Linux文件系统之mv(重命名/移动文件)
mv(move)命令 输入man mv,了解到mv命令是用于移动或重命名文件 语法 mv [options] source dest mv [options] source... directory ...
- appium+python 【Mac】UI自动化测试封装框架介绍 <二>---脚本编写（单设备）
1.单设备的执行很简单,平时可多见的是直接在config中进行配置并进行运行即可.如下: # coding=UTF- ''' Created on // @author: SYW ''' from T ...
- 记一次 解决 vue 兼容ie11 的问题
vue2.0 最近项目需要做到兼容ie11,找问题找半天,于是各种百度, 发现引入 babel-polyfill 还是有问题 空白页面 参考它的配置 ( 最后一句代码为引入的资源路径 ) 我跟他差 ...
- spring boot 入门 使用spring.profiles.active来分区配置(转)
很多时候,我们项目在开发环境和生成环境的环境配置是不一样的,例如,数据库配置,在开发的时候,我们一般用测试数据库,而在生产环境的时候,我们是用正式的数据,这时候,我们可以利用profile在不同的环境 ...
- 解决从其他地方拷贝过来的Android项目在本机不能运行（报错）的问题
这个问题一般是由gradle版本不同引起的.要解决可以这样: 一.在确保本机Android studio 正常使用的情况下,在本机新建一个Android项目 二.在文件夹中打开新建的Android项目 ...