JQuery实现简单的选择框

最新推荐文章于 2024-08-21 10:44:55 发布

weixin_30737363

最新推荐文章于 2024-08-21 10:44:55 发布

阅读量42

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ljc7878/p/7400275.html

本文介绍了一个简单的全选、全不选及反选功能实现案例，使用纯 JavaScript 和 HTML 完成，适用于网页表单设计。通过简单的代码示例展示了如何操作页面上的复选框。

网站设计中多多少少会有一些表单元素，如這样简易的选择框的实现：

代码如下：

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>全选反选案例-jq22.com</title>
	<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<style>
	ul {
	list-style:none;
	}
	</style>
	</head>
	<body>
	<ul>
	<li><input type="checkbox" name="love[]">你好1</li>
	<li><input type="checkbox" name="love[]">你好2</li>
	<li><input type="checkbox" name="love[]">你好3</li>
	<li><input type="checkbox" name="love[]">你好4</li>
	<li><input type="checkbox" name="love[]">你好5</li>
	<li>
	<a href="javascript:qx()">全选</a>
	<a href="javascript:bx()">全不选</a>
	<a href="javascript:fx()">反选</a>
	</li>
	</ul><script>
	// 找到 name = love[] 的像
	var Love = document.getElementsByName('love[]');

	function qx() {
	//分别给没一个对象的集合，选中
	for (i = 0; i < Love.length; i++) {
	Love[i].checked = true;
	}

	}

	function bx() {
	for (i = 0; i < Love.length; i++) {
	Love[i].checked = false;
	}

	}

	function fx() {
	for (i = 0; i < Love.length; i++) {

	if (Love[i].checked == true) {
	Love[i].checked = false;
	} else {
	Love[i].checked = true;
	}
	}

	}</script>
	</body>
	</html>