目标效果：网页全选功能，即点击全选标签可选择全部复选框

实现代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        window.onload=function () //加载全部网页内容

        {

            var obtn = document.getElementById('btn'); //获取全选标签

            var ainput = document.getElementsByTagName('input');//获取全部input标签即获取全部复选框

            var i = 0;

            obtn.onclick=function ()//点击全部标签要执行下面事件

            {

                for (i=0;i<ainput.length;i++)

                {

                    ainput[i].checked=true;//重复选择复选框

                }

            }

        }

    </script>

</head>

<body>

    <p id="btn">全选</p>

    <input type="checkbox" />

    <input type="checkbox" />

</body>

</html>

js之全选即点击全选标签可选择全部复选框的更多相关文章

  1. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

  2. JAVA个人小程序GUI篇-收银（标签、按钮、复选框、下拉标、文本域、表格······）

    如果用eclipse需先装载windowsbuild //导入包 import java.awt.BorderLayout; import java.awt.EventQueue; import ja ...

  3. jquery获取当前被选择的复选框的value的集合

    1.HTML代码 <input type="checkbox" name="productID" value="0"> < ...

  4. GridControl 选择列、复选框全选（上）

    说明: GirdControl 中添加一列,这一列不是写在数据库中的,而是代码中添加的. 图示: 底层类代码: #region GridControl 全选 /// <summary> / ...

  5. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  6. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  7. jQuery+SpringMVC中的复选框选择与传值

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...

  8. Angular/Vue多复选框勾选问题

    此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...

  9. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

随机推荐

  1. Service启动过程分析

    Service是一种计算型组件,用于在后台执行一系列的计算任务.由于工作在后台,因此用户是无法直接感知到它的存在.Service组件和Activity组件略有不同,Activity组件只有一种运行模式 ...

  2. Spring MVC 原理探秘 - 一个请求的旅行过程

    1.简介 在前面的文章中,我较为详细的分析了 Spring IOC 和 AOP 部分的源码,并写成了文章.为了让我的 Spring 源码分析系列文章更为丰富一些,所以从本篇文章开始,我将来向大家介绍一 ...

  3. linux 下动态链接实现原理

    符号重定位 讲动态链接之前,得先说说符号重定位. c/c++ 程序的编译是以文件为单位进行的,因此每个 c/cpp 文件也叫作一个编译单元(translation unit), 源文件先是被编译成一个 ...

  4. JavaScript高级程序设计--函数小记

    执行环境和作用域链   每个函数都有自己的执行环境.当执行流进入一个函数时,函数 的环境就会被推入一个环境栈中.而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境.   当代码在一个环境中 ...

  5. 【Spark调优】：结合业务场景，优选高性能算子

    聚合操作使用reduceByKey/aggregateByKey替代groupByKey 参见我的这篇博客说明 [Spark调优]:如果实在要shuffle,使用map侧预聚合的算子 内存充足前提下使 ...

  6. numpy 介绍

    NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多(该结构也可以用来表示矩 ...

  7. LeetCode：145_Binary Tree Postorder Traversal | 二叉树后序遍历 | Hard

    题目:Binary Tree Postorder Traversal 二叉树的后序遍历,题目要求是采用非递归的方式,这个在上数据结构的课时已经很清楚了,二叉树的非递归遍历不管采用何种方式,都需要用到栈 ...

  8. 爬虫--工具安装Jupyter anaconda

    anaconda https://www.anaconda.com/download http://docs.anaconda.com/anaconda/user-guide/getting-star ...

  9. Fork/Join框架

    java 5开始引入了Executor和ExecutorService接口以及实现这两个接口的类之后,使得java在并发支持上得到了进一步的提升.执行器框架(Executor Framework)将任 ...

  10. 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...