用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写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
随机推荐
- centos8平台使用vmstat监控系统
一,vmstat的用途和特点: vmstat 是一个常用的系统性能分析工具,主要用来分析系统的内存使用情况,也常用来分析 CPU 上下文切换和中断的次数. 相对于 iostat 来说,vmstat 可 ...
- python的部分GUI模块简介tkinter、pyqt5（Qt Designer）
笔者认为,这两个作为Python3较为常用且简单的GUI模块,是Python开发者所必须学习至少是了解的. 其中tkinter为Python3自带的GUI模块,而pyqt5则需要通过pip insta ...
- vue知识点14
1. 父组件给子组件传值 1)<组件 属性="传改子组件的值"></组件> v-bind:属性="识别数据类型和变量" ...
- JavaScript实现基于数组的栈
class StackArray { constructor() { this.items = []; } push(element) { this.items.push( ...
- Setuptools 【Python工具包详解】
什么是setuptools setuptools是Python distutils增强版的集合,它可以帮助我们更简单的创建和分发Python包,尤其是拥有依赖关系的.用户在使用setuptools创建 ...
- 云计算管理平台之OpenStack计算服务nova
一.nova简介 nova是openstack中的计算服务,其主要作用是帮助我们在计算节点上管理虚拟机的核心服务:这里的计算节点就是指用于提供运行虚拟机实例的主机,通常像这种计算节点有很多台,那么虚拟 ...
- MATLAB中的参数估计函数详解及调用示例【联合整理】
前言 因为最近项目上的需要,才发现MATLAB的统计工具箱中的参数估计函数,觉得很简单很好用,现在把所有的参数估计函数整理一下,并在最后面附上调用示例. 参与人员 由于时间关系,这篇随笔是两个人一起整 ...
- 【总结】zookeeper
一.入门 1.概述 Zookeeper 是一个开源的分布式的,为分布式应用提供协调服务的 Apache 项目 2.zookeeper特点 (1)Zookeeper:一个领导者(Leader),多个跟随 ...
- css-2d,3d，过渡，动画
css2d CSS3 转换可以对元素进行移动.缩放.转动.拉长或拉伸. 2D变换方法: translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 transform: ...
- 微服务通信之ribbon实现原理
前言 上一篇我们知道了feign调用实现负载均衡是通过集成ribbon实现的.也较为详细的了解到了集成的过程.现在我们看一下ribbo是如何实现负载均衡的.写到这里我尚未去阅读源代码,我在这里盲猜一下 ...