JQuery checkbox实现全选反选

最新推荐文章于 2022-08-29 21:32:04 发布

lixiang12580asdf

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量95

点赞数

分类专栏： js/jquery 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/lixiang12580asdf/article/details/84450115

版权

js/jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<script language="JavaScript">
	$(document).ready(function() {
		//<input type="button" id="CheckedAll" value="全　选"/>
		$("#CheckedAll").click(function() {
			$("input[name=items]").attr("checked","checked");
		});

		//<input type="button" id="CheckedNo" value="全不选"/>
		$("#CheckedNo").click(function() {
			$("input[name=items]").attr("checked",null);
		});

		//<input type="button" id="CheckedRev" value="反　选"/> 
		$("#CheckedRev").click(function() {
			$("input[name=items]").each(function(index, domEle) {
				if(domEle.checked) {
					$(domEle).attr("checked",null);
				} else {
					$(domEle).attr("checked","checked");
				}
			});
		});

		//<input type="checkbox" id="checkedAll_2"/>全选/全不选
		$("#checkedAll_2").click(function() {
			if(this.checked) {
				$("input[name=items]").attr("checked","checked");
			} else {
				$("input[name=items]").attr("checked",null);
			}
		});
	});
</script>
<body>
	<form method="post" action="">
	   	请选择您的爱好!
		<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
	   	<br/>
	    <input type="checkbox" name="items" value="足球"/>足球
		<input type="checkbox" name="items" value="篮球"/>篮球
		<input type="checkbox" name="items" value="游泳"/>游泳
		<input type="checkbox" name="items" value="唱歌"/>唱歌
	   	<br/>
	    <input type="button" id="CheckedAll" value="全　选"/>
	    <input type="button" id="CheckedNo" value="全不选"/>
	    <input type="button" id="CheckedRev" value="反　选"/> 

		<input type="button" id="send" value="提　交"/> 
	</form>
</body>
</html>

lixiang12580asdf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery checkbox实现全选反选

[code="java"] Untitled Document $(document).ready(function() { // $("#CheckedAll").click(function() { $("input[name=items]").attr("checked","checked"); }); // ...
复制链接

扫一扫

专栏目录