JS_DOM练习_全选练习_

最新推荐文章于 2022-11-27 01:40:29 发布
最新推荐文章于 2022-11-27 01:40:29 发布
阅读量407 收藏 5
点赞数
分类专栏： JS练习 文章标签： js javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44028439/article/details/117523198
版权

一、题目要求

点击全选时五个复选框全部选中，点击全不选时五个复选框都不选择。
点击反选的时候，反向选择第二行其他复选框。
点击提交则弹出提示框显示选择内容。
在这里插入图片描述
二、代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
   
				var items = document.getElementsByName('items');//获取四种运动对应的复选框
				var allBox = document.getElementById('checkAllBox');//获取最上方全选\全不选复选框
				var biaoDanArr = [];//声明一个数组，方便提交表单时输出字符串
				var itemsNum = 0 ;//计数器
				const itemsLength = items.length;//获取运动对应复选框个数，方便循环使用
				//声明监听函数
				function myClick(idstr,fun){
   
					var ids = document.getElementById(idstr);
					ids.onclick = fun;
				}
				//为每个复选框添加监听器
				for(let i = 0 ; i<itemsLength;i++){
   
					items
最低0.47元/天 解锁文章
陈雅萍
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript之dom详细笔记加练习
weixin_49213878的博客
09-13 1096
javascript-dom的详细笔记+小练习
11.JS全选练习.zip
01-29
在“11.JS全选练习.mp4”视频教程中，很可能会详细讲解这些概念，并通过实例演示如何创建一个全选功能，包括如何获取和操作DOM元素，以及如何添加和处理事件监听器。观看这个视频，将有助于你深入理解和实践...
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 1719
整一些可以练着玩的熟悉语法的DOM小例子
js DOM 练习题
哈哈绝的博客
10-22 3836
js DOM 练习题 点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色 通过在页面上点击button，实现主题切换 主题1：黑底白字 主题2：粉底绿字 封装一个函数，兼容所有浏览器，通过类名取得标签。 xxx.getElementsByClassName() IE8及以前的浏览器不兼容，定义一个函数，来实现这个功能 点击button，在页面上创建一个三行四列的表格 表格的动态添加、删除 封装函数，实现查找兄弟节点（next、previous），
【学习笔记41】DOM操作的练习
yizhiyang
11-27 657
DOM操作的练习
七、DOM（下） - 章节课后练习题及答案
熊先森的博客
04-22 1万+
DOM（下） - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。
JS学习DOM 关联下拉列表，时钟，全选全不选，选中左移右移，实现创建自定义表格 弹出选项页面填入文本框
07-05
2.全选全不选的练习：四个功能按钮，全选全不选按钮(点一下全选，再点一下全不选)，全选按钮，全不选按钮，反选按钮 3.创建自定义表格（输入自定义行数和列数点击按钮即可生成表格） 4.时钟（显示当前动态时间） 5....
DOM练习-onkeydown事件--onmouseover事件-左侧菜单栏点击收放-图片切换-checkbox全选-表单校验
02-15
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown...【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-用户名密码校验（表单校验） 带注释/总结
js的练习案例2
10-21
在JavaScript的世界里，"js的练习案例2"为我们提供了一个学习和实践的平台，特别是针对初学者。这个压缩包中的内容可能包括了多个实例，帮助我们掌握如何在前端开发中处理图片切换和实现全选与反选功能。这两个功能...
JavaScript原码_自编
04-27
JavaScript是Web开发中不可或缺的一部分，尤其在前端领域，它提供了丰富的功能来操作页面元素和处理用户交互。在本“JavaScript原码”...对于初学者来说，不断练习和探索这些知识点将有助于提升JavaScript编程能力。
HTML DOM的练习
06-15
html当中DOM知识的小练习。 节点练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。html当中DOM知识的小练习。
原生JS经典小项目-DOM练习
05-18
原生JS经典小项目-DOM练习
js_HTML_Dom操作练习
10-15
js_HTML_Dom操作练习，比较基础的
六、DOM（上） - 章节课后练习题及答案
熊先森的博客
03-28 1万+
第六章DOM（上） - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍
DOM查找练习
dengfengling999的博客
01-11 275
运用知识点： 浏览器在加载一个页面的时候，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到也免得上边，在代码执行时，页面还没有加载DOM对象也没有加载，会导致无法获取到DOM对象，里面的button还没有加载，所获取到的btn对象为空 浏览器在加载一个页面的时候，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到也免得上边，在代码执行时，页面还没有加载DOM对象也没有加载，会导致无法获取到DOM对象，里面的button还没有加载，所获取到的btn对象
学习js的几个小练习
xiaojing的博客
03-15 6243
第一个效果非常简单，就是五个按钮来简单地改变框框的样式，但是我还是做了有一会吧，先尝试用addEventListener()这个方法不管用，想用nodeValue来获取按钮的值也不管用，想将inputs[i].value的值传入点击事件方法也遇到问题。种种尝试之后，我发现在onclick事件中有一个this，它指向的是当前点击的一个节点，因此可以通过this.value来获取按钮的值，我觉得我的写
Javascript复习题
热门推荐
采菊东篱下，Python满乾坤！
09-09 2万+
Javascript复习题 一、选择题 1、写“Hello World”的正确javascript语法是？                            (A) A.document.write("Hello World")            B. "Hello World"   C.response.write("Hello World")              D.
JS面试题--DOM操作相关
一只胖胖胖miao
08-29 1693
（1）在DOM中操作中怎么创建、添加、删除、移除、替换、插入和查找节点 ①通过以下代码创建节点 createDocumentFragment()//创建一个DOM片段 createElement();//创建一个具体的元素 createTextNode();//创建一个文本节点 ②添加、移除、替换、插入节点 appendChild(); removeChild(); replaceCh...
JQuery 常见DOM操作练习1
汉南最後の読書人
11-06 1884
1.管理选择器(size()方法)所得的结果 size()方法 <!-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF0
react 全选_使用React的Hooks+ts实现全选和全不选？
最新发布
05-31
可以通过使用React的Hooks和TypeScript来实现全选和全不选功能。下面是一个简单的例子： ```tsx import React, { useState } from "react"; interface Item { id: number; name: string; selected: boolean; } interface Props { items: Item[]; } const SelectAll: React.FC<Props> = ({ items }) => { const [selectAll, setSelectAll] = useState(false); const handleSelectAll = () => { const updatedItems = items.map((item) => ({ ...item, selected: !selectAll })); setSelectAll(!selectAll); // 更新items }; const handleSelectItem = (id: number) => { const updatedItems = items.map((item) => item.id === id ? { ...item, selected: !item.selected } : item ); const allSelected = updatedItems.every((item) => item.selected); setSelectAll(allSelected); // 更新items }; return ( <div> <input type="checkbox" checked={selectAll} onChange={handleSelectAll} /> 全选 {items.map((item) => ( <div key={item.id}> <input type="checkbox" checked={item.selected} onChange={() => handleSelectItem(item.id)} /> {item.name} </div> ))} </div> ); }; export default SelectAll; ``` 在这个例子中，`SelectAll`组件接收一个`items`数组作为props，该数组包含`id`、`name`和`selected`属性。`selectAll`状态用于表示是否全选，初始值为`false`。`handleSelectAll`函数用于处理全选/全不选事件，它会将`items`数组中所有元素的`selected`属性设置为`!selectAll`，并更新`selectAll`状态。`handleSelectItem`函数用于处理单个item的选择事件，它会将选中的item的`selected`属性取反，并检查是否所有的item都被选中，如果是，将`selectAll`状态设置为`true`。最后，`SelectAll`组件渲染一个全选的`checkbox`和一个包含所有`item`的列表，每个`item`都有一个选择`checkbox`，当选中一个`checkbox`时，将触发`handleSelectItem`函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值