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. codeforces 582A GCD Table

    题意简述: 给定一个长度为$n$的序列 将这个序列里的数两两求$gcd$得到$n^2$个数 将这$n^2$个数打乱顺序给出 求原序列的一种可能的情况 ------------------------- ...

  2. SQL分支语句与循环语句

    分支语句 if then elsif then else end if 举例: set serveroutput on declare num number; begin num:; then dbm ...

  3. MSF——Payload模块（二）

    MSF系列: MSF——基本使用和Exploit模块(一) MSF——Payload模块(二) MSF——Meterpreter(三) MSF——信息收集(四) 一.exploit和payload e ...

  4. SpringBoot连接Oracle

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  5. java中的fail-fast(快速失败)机制

    java中的fail-fast(快速失败)机制 简介 fail-fast机制,即快速失败机制,是java集合中的一种错误检测机制.当在迭代集合的过程中对该集合的结构改变是,就有可能会发生fail-fa ...

  6. asciinema.org -Record Your Terminal Share it with no fuss

    紀錄 Terminal 下指令的過程 http://asciinema.org/

  7. 48.Course Schedule（课程安排）

    Level:   Medium 题目描述: There are a total of n courses you have to take, labeled from 0 to n-1. Some c ...

  8. flex:1 内容不要撑开

    .content { flex: 1; overflow: hidden: }

  9. 用C实现基本的输出参数个数与参数内容

    开发环境为 centos7 和 gcc4.8.5,代码如下: /** * 用C实现基本的输出参数个数与参数内容 */ #include <stdio.h> int main(int arg ...

  10. java synchronized的四种用法

    一 修饰方法 Synchronized修饰一个方法很简单,就是在方法的前面加synchronized,synchronized修饰方法和修饰一个代码块类似,只是作用范围不一样,修饰代码块是大括号括起来 ...