JS_DOM练习_全选练习_

一、题目要求

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

<!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
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过使用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、付费专栏及课程。

余额充值