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 ...
随机推荐
- 我理解的epoll（一）——实现分析
epoll项目中用了几次,但是对于其原理只是一知半解.我希望通过几篇blog能加深对她的理解. 我认为epoll是同步IO,因为他在调用epoll_wait时,内核在有I/O就绪前是阻塞的,虽然可以将 ...
- STM32L15x——ADC采集DMA数据只第一次正确（已解决）
前提:我用的芯片是STM32L系列,可能对其它STM32系列不完全适用,仅供参考! 一.问题描述 我在使用DMA方式读取单ADC单通道采集的数据时,发现只能正确的采集一次数据,后来的就一直与第一次的相 ...
- mybatis-generator-gui
mybatis-generator-gui介绍 mybatis-generator-gui是基于mybatis generator开发一款界面工具, 本工具可以使你非常容易及快速生成Mybatis的J ...
- EasyUI中取的DataGrid中选中行数据
dataGrid中显示列:ItemID,ItemCode,ItemName,Note 一.选中一行 var selRow = $('#dataGrid').datagrid('getSelected' ...
- vue-element-admin实现模板打印
一.简介 模板打印也叫”套打“,是业务系统和后台管理系统中的常用功能,B/S系统中实现”套打“比较繁琐,所以很多的B/S系统中的打印功能一直使用的是浏览器打印,很少实现模板打印.本篇将介绍在Vue E ...
- 解决Ubuntu下ssh无法启动
Ubuntu ssh一直无法启动. 通过 systemctl status ssh.service 查看到的错误是 Dec 16 13:35:22 iZm5eckxl2tqyka9eoe7b3Z ...
- Sourcetree 出现错误提示git -c diff.mnemonicprefix=false -c core.quotepath=false fetch origin
具体表现为:sourcetree无法和gitlab远程仓库进行交互,但使用本地cmd,可以使用git命令和远程仓库交互通过各种账户.秘钥等操作,都无法解决该问题具体信息如下: 解决方式:点击 工具–& ...
- 对称加密实现重要日志上报Openresty接口服务
记录后端接收日志的流程: 由于记录的是广告数据,单次计费数据都会上报,全国内约10几万终端上报. 终端上报:Android电视端Apk上报 接收终端:Openresty(Nginx+lua)利用ngi ...
- BCB 如何拦截TAB键消息
最近项目中一个需求,按下Tab键,按照指定的顺序进行跳转. 在实现的过程中发现,Tab按下的时候,会让当前控件失去焦点.并跳转到其他可焦点控件 例如 TEdit,TButton 等. 究其原理,是因为 ...
- SqlMetaData异常 dbType xx 对于此构造函数无效。
今天在dapper中想扩展使用表值类型参数——tableValue.但是dapper不支持此类参数,于是扩展了一下.其中出现了一个问题. Microsoft.SqlServer.Server.SqlM ...