复选框实现。全选、全不选、多选

news/2024/7/19 15:05:11 标签: js, javascript, html

复选框实现全选、全不选、被选;

html_2">html代码

html">		<input type="checkbox" id="checksboxs">全选
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">	
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">

html" title=js>js_16">html" title=js>js代码

html" title=javascript>javascript"><script type="text/html" title=javascript>javascript">
			var checksboxs = document.getElementById('checksboxs');
			var checks1 = document.getElementsByClassName('checks1');
			// 全选
			checksboxs.onchange = function(){
				for(var i = 0;i<checks1.length;i++){
					checks1[i].checked = this.checked;
				}
			}
			
			var index = 0;// 用来计数
			for(let i = 0;i<checks1.length;i++){
					 每次点击循环一遍所有的元素,存在值为 false(没选中的复选框)就给 checksboxs 赋值false
					 var flag = true;
					 for(let j = 0;j<checks1.length;j++){
					 	if(!checks1[j].checked){
					 		flag = false;
					 		break;
					 	}
					 }
					 checksboxs.checked = flag;
				}
			}
		</script>

按钮实现全选、全不选、多选;

html_46">html代码

html">		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">	
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<button id="allCheck">全选</button>
		<button id="notCheck">全不选</button>
		<button id="reveCheck">反选</button>

html" title=js>js_62">html" title=js>js代码

html" title=javascript>javascript"><script type="text/html" title=javascript>javascript">
			var allCheck = document.getElementById('allCheck');
			var notCheck = document.getElementById('notCheck');
			var reveCheck = document.getElementById('reveCheck');
			var checks = document.getElementsByClassName('checks');
			// 全选
			allCheck.onclick = function(){
				for(var i = 0;i<checks.length;i++){
					checks[i].checked = true;
				}
			}
			//全不选
			notCheck.onclick = function(){
				for(var i = 0;i<checks.length;i++){
					checks[i].checked = false;
				}
			}
			//反选
			reveCheck.onclick = function(){
				for(var i = 0;i<checks.length;i++){
					checks[i].checked = !(checks[i].checked)
				}
			}
		</script>

http://www.niftyadmin.cn/n/1769748.html

相关文章

Page_slider.js 的使用

Page_slider.js 的使用&#xff0c;PC端鼠标滚轮滚动效果 css代码 <style type"text/css">.layer:nth-child(odd){background-color: aquamarine}.layer:nth-child(even){background-color: brown}</style>HTML格式 最外层盒子 id 符合标识符规则即可…

转发2021年最新Web前端面试题精选大全及答案

2021年最新Web前端面试题精选大全及答案 转载位置&#xff1a; https://blog.csdn.net/HanXiaoXi_yeal/article/details/112306277

数组去重的方式练习

数组去重 方法一 思路&#xff1a;使用indexOf判断新数组是否存在指定的值&#xff0c;不存在就添加&#xff0c;存在就跳过。返回新数组不改变原数组。 var arr2 [1,5,6,3,2,4,1,5,6,3,2,4,8,9,5,4,22,55,41,23,64];function delArrRepeat1(arr){var newArr []; //定义一个…

video的基本使用

video的基本使用效果 播放、暂停、快进、退后、快放、慢放、音量大小、全屏效果。 HTML <section class"box"><article class"tv"><video src"va/4video.webm" id"tvs" controls></video></article>…

canvas个性化时钟

效果演示 简介 十二小时制的时钟&#xff0c;时刻度在圆盘上面显示&#xff0c;交叉线顶角为分和秒的刻度。 时分秒&#xff1a;最小的是秒、中等的是分、圈内的蓝点为时。 中心圆&#xff1a;随着秒钟缩小&#xff0c;数字时钟的显示。 秒钟走动的声音&#xff0c;每小时和每…

art-template整理

官网介绍&#xff1a;art-template是一个简单且超快速的模板引擎&#xff0c;可通过范围内预先声明的技术优化模板渲染速度&#xff0c;从而实现接近JavaScript极限的运行时性能。同时&#xff0c;它同时支持NodeJS和浏览器。在线速度测试。 理解 在使用js进行前端开放的时候&a…

less整理

Less CSS是一门非程序式语言&#xff0c;没有变量、函数、作用域等概念 CSS需要书写大量看似没有逻辑的代码&#xff0c;CSS冗余度是比较高的不方便维护及扩展&#xff0c;复用性不高CSS没有很好的计算能力对开发人员来讲&#xff0c;会因为缺少CSS编写经验而很难写出组织良好…

微信小程序之pinker组件使用以及自动进行相减日期

首先&#xff0c;我这里使用pinker组件代码为 <view class"section"><view class"section__title">开始时间</view><picker mode"date" value"{{date}}" start"{{startTime}}" end"2020-09-01&qu…