JQuery实现简单的选择框

最新推荐文章于 2021-09-28 08:36:52 发布

ljc7878

最新推荐文章于 2021-09-28 08:36:52 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/ljc7878/article/details/77430701

版权

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

代码如下：

	<!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>

关注