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. Apache: No space left on device: Couldn’t create rewrite_map(XXXX)

    启动apache的时候 有时候会遇到这样的错误:No space left on device: Couldn’t create rewrite_map(XXXX) 第一眼看以为是磁盘没有空间了,其实 ...

  2. gradle spring 配置解释

    plugins { id 'java' id 'eclipse' id 'idea' # 统一springboot版本号 id 'org.springframework.boot' version ' ...

  3. 建站手册-浏览器信息：Google Chrome 浏览器

    ylbtech-建站手册-浏览器信息:Google Chrome 浏览器 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_chrome.a ...

  4. 测开之路五十六：实现类似unittest的断言

    import inspect class Case(object): """ 实现断言 """ def __init__(self): se ...

  5. php Connection timed out after 30000 milliseconds

    function HttpRequest($url, $params, $method = 'GET', $header = array(), $bEncode = true){ $opts = ar ...

  6. SQLAlchemy应用到Flask中

    安装模块 pip install Flask-SQLAlchemy 加入Flask-SQLAlchemy第三方组件 from flask import Flask # 导入Flask-SQLAlche ...

  7. xterm.js的深入学习

    demo <template> <div id="app" class="app-box">Hello</div> < ...

  8. Python中sys模块

    Python的sys模块提供访问解释器使用或维护的变量,和与解释器进行交互的函数.通俗来讲,sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python运行时的环境. ...

  9. matplotlib系列——中文显示

    幕布视图:https://mubu.com/doc/alG8r_3iSw 参考文献:嵩天的Python课程讲义 方式一: 示例 rcParams的属性 方式二:(推荐使用) 示例: 中文字体种类

  10. [fw]GDT是在分段中為了相容real mode 跟 protected mode的產物

    在Protected Mode下,一个重要的必不可少的数据结构就是GDT(Global Descriptor Table). 为什么要有GDT?我们首先考虑一下在Real Mode下的编程模型: 在R ...