热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

表单的取消和全选

表单的取消和全选

表单的取消和全选


<html lang&#61;"en">
<head><meta charset&#61;"UTF-8"><meta http-equiv&#61;"X-UA-Compatible" content&#61;"IE&#61;edge"><meta name&#61;"viewport" content&#61;"width&#61;device-width, initial-scale&#61;1.0"><title>Documenttitle>
head>
<body><div class&#61;" wrop"><table><thead><tr><th><input type&#61;"checkbox" id&#61;"all_cheack"> th><th>标题1th><th>标题1th>tr> thead><tbody><tr><td> <input type&#61;"checkbox" class&#61;"a_cheack"> td><td>手机2td><td>手机3td>tr><tr><td> <input type&#61;"checkbox" class&#61;"a_cheack"> td><td>手机2td><td>手机3td>tr><tr><td> <input type&#61;"checkbox" class&#61;"a_cheack"> td><td>手机2td><td>手机3td>tr>tbody>table>div>body>
<script>// 1.全选和取消全选的做法&#xff1a;让下面所有复选框的checked的属性&#xff08;选中状态&#xff09;都跟随全选按钮var inp&#61; document.querySelector("#all_cheack")//全选按钮var a_inp&#61;document.querySelector("tbody").querySelectorAll(".a_cheack")//给所有复选框inp.onclick&#61;function (params) {//全选按钮注册事件for (let index &#61; 0; index < a_inp.length; index&#43;&#43;) {// console.log(this.checked);它可以得到当前复选框的选中状态&#xff0c;true为选中&#xff0c;false为没选中a_inp[index].checked&#61;this.checked}}//2.下面复选按钮影响上面的&#xff0c;全选按钮 思路&#xff1a;给下面所有的小按钮绑定点击事件&#xff0c;点击后循环查看是否全部选中for (let i &#61; 0; i < a_inp.length; i&#43;&#43;) {//// 点击点击下面的复选框都要每次查看下面的小按钮是否都被选中a_inp[i].onclick&#61;function () {var flag&#61;true//控制全选按钮是否被选中for (let i &#61; 0; i < a_inp.length; i&#43;&#43;) {if( !a_inp[i].checked){//如果是false取反就会变成true&#xff0c;就会进入if执行&#xff0c;就说明有的小复选框没有被选中flag&#61;falseconsole.log("inp.checked1",flag);}}inp.checked&#61;flag//赋值全选按钮console.log("inp.checked",inp.checked);}}
script>
html>


推荐阅读
  • 本文详细解析了 offset、client 和 page 坐标系统的不同之处。offset 是相对于当前元素的边界框的距离,与滚动条无关;client 是相对于可视区域(viewport)的距离,也与滚动条无关;page 则是相对于整个文档的距离,受滚动条位置影响。 ... [详细]
  • 本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作,并介绍了获取本地文件路径的方法。HTML5提供了一系列API,使得这些操作变得更加简便和安全。 ... [详细]
  • springMVC JRS303验证 ... [详细]
  • 交互式左右滑动导航菜单设计
    本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ... [详细]
  • docker镜像重启_docker怎么启动镜像dock ... [详细]
  • 软件工程课堂测试2
    要做一个简单的保存网页界面,首先用jsp写出保存界面,本次界面比较简单,首先是三个提示语,后面是三个输入框,然 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • Django 使用slug field时遇到的问题 ... [详细]
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文深入探讨了UNIX/Linux系统中的进程间通信(IPC)机制,包括消息传递、同步和共享内存等。详细介绍了管道(Pipe)、有名管道(FIFO)、Posix和System V消息队列、互斥锁与条件变量、读写锁、信号量以及共享内存的使用方法和应用场景。 ... [详细]
  • 2017-2018年度《网络编程与安全》第五次实验报告
    本报告详细记录了2017-2018学年《网络编程与安全》课程第五次实验的具体内容、实验过程、遇到的问题及解决方案。 ... [详细]
  • Logback使用小结
    1一定要使用slf4j的jar包,不要使用apachecommons的jar。否则滚动生成文件不生效,不滚动的时候却生效~~importorg.slf ... [详细]
  • 724. 寻找数组的中轴索引
    给定一个整数数组 `nums`,编写一个方法返回该数组的“中轴”索引。定义中轴索引为该索引左侧所有数字之和等于右侧所有数字之和的索引。如果不存在这样的索引,则返回 -1。如果有多个中轴索引,返回最左边的一个。 ... [详细]
  • 本文详细解析了Python函数中形参与实参的概念及其应用,通过实例讲解如何正确使用这些参数,帮助初学者更好地掌握Python编程。 ... [详细]
author-avatar
大街上
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有