DOM复选框全选和反选

最新推荐文章于 2021-09-01 23:15:17 发布
最新推荐文章于 2021-09-01 23:15:17 发布
阅读量151 收藏
点赞数 2
分类专栏： 个人心得 文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44070254/article/details/115798391
版权

DOM复选框全选和反选

实现代码 手打：

	<style type="text/css">
			table {
				margin: 100px auto;
				border-collapse: collapse;
			}
			
			td,
			th {
				text-align: left;
				width: 120px;
				height: 30px;
				border: 1px solid palegreen;
			}
		</style>
	</head>

	<body>
		<table>
			<thead>
				<tr>
					<th><input class="zom" type="checkbox" />全选</th>
					<th>1</th>
					<th>2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input class="but" type="checkbox" /></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><input class="but" type="checkbox" /></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><input class="but" type="checkbox" /></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><input class="but" type="checkbox" /></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>

		</table>
		<script type="text/javascript">
			var zom = document.querySelector('.zom');
			var buts = document.querySelectorAll('.but');
			zom.onclick = function() {
				for(var i = 0;i < buts.length;i++) {
					buts[i].checked = this.checked;
				}
			}
			for(var i = 0;i < buts.length;i++) {
				buts[i].onclick = function() {
					var flag = true;
					for(var i = 0;i < buts.length;i++) {
						if(!buts[i].checked) {
							flag = false;
						}
					}
					zom.checked = flag;
				}
			}
		</script>

在这里插入图片描述
在这里插入图片描述

贪吃ღ大魔王
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
复选框的全选和反选
qq_38334528的博客
09-26 153
效果图 window.onload = function(){ selAll = document.getElementById("selAll"); hobbys = document.getElementsByName("hobby"); fx = document.getElementById("fx");
DOM编程-复选框的全选和取消全选
heliuerya的博客
02-10 521
复选框的全选和取消全选
09-Dom操作复选框（全选、全不选、反选）
高调做事，低调做人！
10-08 1569
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> Insert title here 您的爱好很广泛！！！ 全选/全不选
用Dom方法和一般方法实现复选框的全选反选
whjwhja6的专栏
03-04 365
方法一：    function a(){  for(var i=1;i   document.getElementById("a"+i).checked=true;   }  }  function b(){  for(i=1;i   document.getElementById("a"+i).checked=false;   }  }  function c(){
Dom复选框操作
weixin_33939843的博客
05-29 92
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> functi...
全选反选（框）
...
09-01 218
全选反选（框） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>全选反选（框）</title> <style> * { padding: 0; margin: 0; } .wrap { w
js html css实现复选框全选与反选
11-23
总结一下，这个例子展示了如何结合使用HTML、CSS和JavaScript来创建一个复选框全选和反选的交互式用户界面。JavaScript的核心在于动态改变DOM元素的属性，而HTML提供了用户界面的基础结构，CSS则用于美化这些元素。...
javascript实现复选框全选或反选
10-20
javascript实现复选框全选或反选的知识点涵盖了JavaScript基础编程、DOM操作、事件处理以及逻辑判断等方面。以下详细说明这些知识点： 1. JavaScript基础编程： JavaScript是一种动态的、解释型的编程语言，主要...
javaScript实现复选框全选反选事件详解
10-19
复选框全选和反选是网页交互设计中常见的功能，常用于列表操作、表单提交等场景，允许用户一次性选择或取消选择多个选项。文中将通过实例代码展示如何编写全选和反选功能，以及它们的基本工作原理。 首先，全选功能...
react实现全选和反选_react实现复选框全选和反选组件效果
weixin_31068553的博客
01-30 1306
本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下运行效果图如下：代码：import React, { Component } from 'react';import { withRouter } from 'react-router-dom';// import Menu from '../menu/Menu.jsx';class List extends...
html 使用js中dom对象完成复选框的 全选，取消全选和反选
雁迟的博客
01-07 541
使用dom对象完成复选框的反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用dom对象完成复选框的反选</title> <script>
javascript用DOM实现 复选框的全选、反选、全不选
永不停歇
03-04 2354
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function qx(){  for(var i=0;i     var ck=document.getElementsByName("ck");   ck[i].checked=tr
JS-DOM编程-05-复选框的全选与取消全选
TSCCG的博客
08-07 1198
JS-DOM编程-05-复选框的全选与取消全选 1.当点击全选框时，选中所有复选框 复选框对象的checked属性代表复选框是否被选中： 如果值为true，则表示复选框被选中 如果值为false，则表示复选框未被选中 我们可以利用checked属性来实现功能。 在全选框中设置一个click事件，当点击全选框时，遍历所有复选框对象， 将全选框的checked属性值赋给所有复选框的checked属性。 <!DOCTYPE html> <html lang="en"> <head
dom中实现全选复选框的实例。
weixin_30955617的博客
10-19 216
PS：这个题考试时没有做出来，摘录下来好好作为实例。 <script type="text/javascript"> //2、实现全选/全不选效果.如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选 //全选/全不选 /* 1、找到全选框 ...
【JavaScript】DOM操作复选框
weixin_33701251的博客
08-26 125
DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后，足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。 下面我们来实现这个效果。 源代码:&...
采用dom实现复选框全选、取消效果
小田同學的博客
04-25 1022
<form action=""> 爱好：<br/> <input type="checkbox" id="all">全选<br/> <input type="checkbox" name="hobby" value="唱歌">唱歌 <input type="checkbox" name="hobby" value="跳舞">跳舞 <input type="
DOM操作checkbox（全选/反选/全不选）
starrysky的专栏
07-01 1472
check.html                        您的爱好很广泛!!!       全选/全不选           保龄球   篮球   跑步   唱歌                     window.onload=function(){    //    document.getElementById(
jsp实现复选框的全选与反选
最新发布
05-12
在 JSP 中实现复选框的全选与反选，可以通过 JavaScript 来...`document.getElementsByName('checkbox')` 通过 name 属性获取所有复选框的 DOM 对象，然后使用循环遍历每个复选框，来实现全选、全不选和反选的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贪吃ღ大魔王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值