js实现复选框全选/全不选/反选

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<title>js实现复选框全选/全不选/反选</title>

	<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">

		//反选

		function toggle() {

			//得到所有标签名为input的元素

			var y = document.getElementsByTagName("input");

			alert(y.length);

			//循环出每个元素

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

				//如果元素的类型为checkbox,就反选

				if(y[i].type == "checkbox") {

					y[i].checked = !y[i].checked;

				}

			}

		}

		//全选

		function selAll() {

			//得到所有标签名为input的元素

			var y = document.getElementsByTagName("input");

			alert(y.length);

			//循环出每个元素

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

				//如果元素的类型为checkbox,就全选

				if(y[i].type == "checkbox") {

					y[i].checked = true;

				}

			}

		}

		//全不选

		function noselAll() {

			//得到所有标签名为input的元素

			var y = document.getElementsByTagName("input");

			alert(y.length);

			//循环出每个元素

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

				//如果元素的类型为checkbox,就全不选

				if(y[i].type == "checkbox") {

					y[i].checked = false;

				}

			}

		}

	</script>

</head>

<body>

	<form>

		爱好：

		<input type="checkbox" value="读书" />读书

		<input type="checkbox" value="唱歌" />唱歌

		<input type="checkbox" value="跳舞" />跳舞

		<input type="checkbox" value="聊天" />聊天

		<input type="checkbox" value="看电影" />看电影

		<input type="button" value="全选" onclick="selAll();" />

		<input type="button" value="全不选" onclick="noselAll();" />

		<input type="button" value="反选" onclick="toggle();" />

	</form>

</body>

	</html>

js实现复选框全选/全不选/反选的更多相关文章

  1. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  2. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  3. 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

    首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...

  4. element-ui 里面el-checkbox多选框，实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

  5. layui 复选框checkbox 实现全选全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因

    刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...

  7. js弹出确认框，挺全

    一种: <a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.google.com'">弹 ...

  8. Yii 生成表单下拉选框及查询下拉选框

    CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...

  9. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  10. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

随机推荐

  1. webstorm启动vue项目配置

    使用命令窗口运行 1. npm run mock 2.npm run dev 每次都打开命令窗口比较麻烦,可以在webstorm内进行配置,从webstorm内启动 选中run下面的edit conf ...

  2. Html5 学习笔记 【PC固定布局】 实战4 footer 区域

    最终效果图: Html代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta chars ...

  3. Java程序员必精通之—synchronized

    更多Java并发文章:https://www.cnblogs.com/hello-shf/category/1619780.html 一.简介 相信每一个java程序员对synchronized都不会 ...

  4. 01、python的基础-->while循环应用

    1.简单的输出小程序 name = input('请输入你的名字:') age = input('请输入你的年龄:') print('我的名字叫'+name,'我今年'+ age + '岁') 2.w ...

  5. HDU 1709 The Balance( DP )

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. SpringBoot入门简介

    SpringBoot诞生的背景 所有软件行业里面,如果要说商用体系,排在第一位的永远是java,因为java的体系丰富,支持度高,安全性也高 但是我们所有的开发者也不得不去忍受Java中的以下痛苦 举 ...

  7. linux基本命令的简单介绍

    基本命令 man:查看帮助信息 :一般系统命令太多,要记住这些命令是不可能的,man是一个联机帮助信息 man提供大量的帮助信息,一般分为以下4各部分 NAME:对命令的简单介绍 SYNOPSIS对命 ...

  8. 【学习总结】Python-3-算术运算符中的/和//

    参考:菜鸟教程-Python3运算符 参考:菜鸟教程-Python3数字 算术运算符中的两种除法的区别: 一个斜杠/:正常的人类除法,两个int相除也保留小数 eg: 21/10 = 2.1 两个斜杠 ...

  9. go语言从例子开始之Example2.类型

    Go 拥有各值类型,包括字符串,整形,浮点型,布尔型等.下面是一些基本的例子. Example: values.go package main import "fmt" func ...

  10. go语言从例子开始之Example29.关闭通道

    关闭 一个通道意味着不能再向这个通道发送值了.这个特性可以用来给这个通道的接收方传达工作已经完成的信息. Example: package main import "fmt" // ...