Javascript实现全选按钮

效果：有全选选项框和单个选项框，选择全选框，所有的的选择都打上的钩，取消全选钩所有的都去掉了钩，如果取消其中某一个的钩，那么全选的钩也取消，反之全选所有的选项，那么全选的钩就会打上。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScript_test</title>

<script src="test.js" type="text/javascript"></script>

<link href="test.css" type="text/css" rel="stylesheet">

</link>

<style>

* {

	margin: 0;

	padding: 0;

}

.div_center_ab {

	position: absolute;

	top: 50%;

	left: 50%;

	width: 14%;

	height: 30%;

	border: 2px solid #6A7006;

	transform: translate(-50%, -50%);

}

.div_center_re {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

}

</style>

</head>

<body >

<div class=" div_center_ab">

  <div class="div_center_re"> 全选

    <input type="checkbox" id="boxall">

    <br>

    <hr>

    选项1

    <input type="checkbox">

    <br>

    选项2

    <input type="checkbox">

    <br>

    选项3

    <input type="checkbox">

    <br>

    选项4

    <input type="checkbox">

    <br>

  </div>

</div>

<script>

 var boxall=document.getElementById("boxall")

 var boxse=document.querySelectorAll("input:nth-child(n+2)")

 console.log(boxall)

 console.log(boxse)

 boxall.onclick=function(){

	var checkall=boxall.checked

	for(var i=0;i<boxse.length;i++)

		boxse[i].checked=checkall;

 }

 //判断不同选项是否被选中

 for(var i=0;i<boxse.length;i++){

	 boxse[i].onclick=function(){

		  var flag=true

         for(var j=0;j<boxse.length;j++){

			if(boxse[j].checked===false){

			 flag=false

			 break

		 }

		 }

		boxall.checked=flag 	

	 }

 }

</script>

</body>

</html>

Javascript实现全选按钮的更多相关文章

  1. checkbox做全选按钮

    1.先写一个html页面,里面写一个全选按钮和几个复选框,实现下面2个要求 (1)点击全选按钮选中时,所有的复选框选中. (2)点击全选按钮取消选中时,所有复选框取消选中. <input typ ...

  2. 列表中checked全选按钮的实现

    用过音乐播放器的人都知道有个全选按钮,如果使用Jquery实现,有个直接选中checked标签的方式 <!DOCTYPE HTML> <html> <head> & ...

  3. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  4. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  5. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  6. JS全选按钮练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  9. 全选按钮的设定和POST处理当前循环的列表

    以下为全选按钮的代码,通过class实现. //全选按钮 $(function () { $("#selectall").change(function () { var isch ...

随机推荐

  1. java 输入输出IO流 IO异常处理try(IO流定义){IO流使用}catch(异常){处理异常}finally{死了都要干}

    IO异常处理 之前我们写代码的时候都是直接抛出异常,但是我们试想一下,如果我们打开了一个流,在关闭之前程序抛出了异常,那我们还怎么关闭呢?这个时候我们就要用到异常处理了. try-with-resou ...

  2. CentOS7学习笔记(六) 用户权限管理

    用户.用户组与文件的关系 在了解权限管理之前先创建一些用户和用户组便于后续学习,在root用户下操作: # 创建两个用户组 [root@localhost data]# groupadd kaifa ...

  3. Flutter学习(9)——Flutter插件实现(Flutter调用Android原生

    原文地址: Flutter学习(9)--Flutter插件实现(Flutter调用Android原生) | Stars-One的杂货小窝 最近需要给一个Flutter项目加个apk完整性检测,需要去拿 ...

  4. 【LeetCode】168. Excel Sheet Column Title 解题报告（Java & Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 迭代 递归 日期 [LeetCode] 题目地址:https: ...

  5. 【LeetCode】830. Positions of Large Groups 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  6. 如何利用Python实现Office在线预览

    目前,市场对于Office在线预览功能的需求是很大的.对于我们用户本身来说,下载Office文件后再实现预览是极其不方便的,何况还有一些不能打开的专业文档.压缩文件等.此时,能提供在线预览服务的软件就 ...

  7. Docker 与 K8S学习笔记（十）—— 容器的端口映射

    我们一般将应用部署在容器里面,而一个服务器上会有许许多多的容器,那么外界该如何访问我们的应用呢?答案是:端口映射. Docker可以将容器对外提供服务的端口映射到host的某个端口上,外网通过此端口访 ...

  8. Jmeter性能测试场景的创建和运行

    目录 性能测试场景的分析 项目背景 Jmeter指标 性能测试场景的设计以及准备 性能测试的总结 性能测试场景的分析 项目背景 ​ 实际工作中,我们拿到一个项目一般来说都会是项目经理说XXX来进行一下 ...

  9. vue使用v-chart图表出现的问题

    npm i v-charts echarts -S 引入 import VCharts from 'v-charts' Vue.use(VCharts) 后发现报错,后来发现安装echarts版本太高 ...

  10. JUC之线程间定制化通信

    线程通信之定制化 之前文章中写了下Condition的使用,这里我们详细说下其中的用法: 首先使用Condition需要实例化Lock private Lock lock = new Reentran ...