js实现复选框的全选、全不选和反选
js实现复选框的全选、全不选和反选
主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框的选择</title>
<style>
#btn{
margin: 5px auto;
}
#btn>input{
font-size: 16px;
color: #fff;
background-color: rgb(110, 34, 182);
outline: none;
}
#city{
background-color: aqua;
}
</style> <script>
window.onload=function(){ var obt1 = document.getElementById('btn1');
var obt2 = document.getElementById('btn2');
var obt3 = document.getElementById('btn3');
var ocity = document.getElementById('city');
var oinput = ocity.getElementsByTagName('input'); obt1.onclick=function(){
for(var i=0;i<oinput.length;i++)
{
oinput[i].checked=true;
}
}
obt2.onclick=function(){
for(var i=0;i<oinput.length;i++)
{
oinput[i].checked=false;
}
}
obt3.onclick=function(){
for(var i=0;i<oinput.length;i++)
{
if(oinput[i].checked==false)
{
oinput[i].checked=true;
}else{
oinput[i].checked=false;
}
}
}
}
</script>
</head>
<body>
<div id="btn">
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="全不选">
<input type="button" id="btn3" value="反选">
</div>
<div id="city">
<input type="checkbox">北京<br>
<input type="checkbox">上海<br>
<input type="checkbox">广州<br>
<input type="checkbox">深圳<br>
<input type="checkbox">武汉<br>
</div>
</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原生支持）
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- checkbox 多选框 ：jquery之全选、全不选、反选
javascriptjqueryselectAll [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发
<input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
随机推荐
- 基于python的图片修复程序-可用于水印去除
图片修复程序-可用于水印去除 在现实的生活中,我们可能会遇到一些美好的或是珍贵的图片被噪声干扰,比如旧照片的折痕,比如镜头上的灰尘或污渍,更或者是某些我们想为我所用但有讨厌水印,那么有没有一种办法可以 ...
- 基于FineUIMVC的代码生成器(传统三层)v1.0
三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...
- 【Vue.js】vue引入组件报错：该组件未注册？
[Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...
- Zookeeper（一） —— 环境搭建
一.概述 集中式 向 分布式演变,高并发.海量存储 应用场景: * 数据发布.订阅的两种方式:推模式.拉模式 * 命名服务 * 分布式协调/通知(心跳检测) * 负载均衡 自增长id和uuid的缺点, ...
- iOS多线程（上）——GCD详解（上）
GCD(Grand central Dispatch)是Apple开发的一个多核编程的较新的解决方法.它主要用于优化应用程序以支持多核处理器以及其他对称多处理系统.下面我讲讲述关于GCD的点,通篇读完 ...
- 【转载】阿里云Windows服务器重置远程登录密码
在使用阿里云Windows系统的云服务器的时候,有时候忘记了远程连接密码,可在浏览器上登录阿里云官网,进入ECS云服务器管理后台重置远程连接的密码,因为此步操作对于服务器安全来说关系重大,所以有时候在 ...
- Android Studio 基础控件使用
TextView android:gravity="center" //文字对其方式 top bottom left right center android:textColor= ...
- Centos 7.6配置nginx反向代理负载均衡集群
一,实验介绍 利用三台centos7虚拟机搭建简单的nginx反向代理负载集群, 三台虚拟机地址及功能介绍 192.168.2.76 nginx负载均衡器 192.168.2.82 web ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- mybatis_07动态SQL_foreach循环
废话不多说,直接上代码! <select id="findUserByforeach" parameterType="userQueryVO" resul ...