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

实现代码如下

<!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. springMVC 处理json 及 HttpMessageConverter 接口

    一.SpringMVC处理json的使用 1.添加依赖jar包 <dependency> <groupId>com.fasterxml.jackson.core</gro ...

  2. Java学习笔记36(File类)

    File类可以对操作系统中的文件进行操作: File类的静态成员变量: package demo; import java.io.File; public class FileDemo { publi ...

  3. 【微服务】.netCore eShopOnContainers 部署实践《二》

    Docker 专业术语介绍 优点:轻量级.可伸缩(灵活性).可靠性.可移植  Container image A package with all of the dependencies and in ...

  4. Hive SQL基础操作

    创建表 hive 查看本地的文件#Can execute local commands within CLI, place a command in between ! and ;!cat data/ ...

  5. 构建NTP时间服务器

    NTP服务器是用于局域网服务器时间同步使用的,可以保证局域网所有的服务器与时间服务器的时间保持一致,某些应用对时间实时性要求高的必须统一时间. 互联网的时间服务器也有很多,例如ntpdate ntp. ...

  6. 线程误区-join,wait(里边还是调用的wait)

    1.一个线程执行结束后会执行该线程自身对象的notifyAll方法,这个是在jvm中实现的. 2.join的作用是:当我们调用某个线程的这个方法时,这个方法会挂起调用线程,直到被调用线程(thread ...

  7. Python常用模块—— Colorama模块

    简介 Python的Colorama模块,可以跨多终端,显示字体不同的颜色和背景,只需要导入colorama模块即可,不用再每次都像linux一样指定颜色. 1. 安装colorama模块 pip i ...

  8. github相关指令学习

    正在廖雪峰官网学习关于git的相关知识,已经不是第一次来学习,但是忘得太快,索性这次边学边记录笔记,加深记忆,方便后期查看 1.找到一个合适的地方,鼠标右键 Git Bush Here ,新建文件夹, ...

  9. Hadoop生态系统之Yarn

    Apache YARN(Yet Another Resource Negotiator) 是Hadoop的集群资源管理系统.YARN被引入Hadoop2最初是为了改善MapReduce的实现,但它具有 ...

  10. SQLi Lab的视频教程和文字教程

    SQLi Lab 系列的文字和视频(需要FQ),讲解的很好 SQLi Lab Series - Introduction SQLi Lab Series - Error Based SQLi Lab ...