Demo-checkbox全(不)选，反选

最新推荐文章于 2022-07-12 16:49:34 发布

_夜风

最新推荐文章于 2022-07-12 16:49:34 发布

阅读量280

点赞数

分类专栏： Jquery学习文章标签： jQuery

本文链接：https://blog.csdn.net/k183000860/article/details/52025251

版权

Jquery学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="" />
	<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>

	<style type = "text/css">

		 input:focus {
		
			border:1px solid #f00;
			background: #f00;
		} 


		

	</style>
	

	<script type="text/javascript">

		$(function(){
			
			var flag = 0;
			$("#all").click(function(){

				
				if(flag == 1) {
					$("[name = items]:checkbox").attr("checked",true);
					$(this.value = "全不选");
					flag = 0;
				}
				else if(flag == 0){
					
					$("[name = items]:checkbox").attr("checked",false);
					$(this.value = "全选");
					flag = 1;
				}
			});

			$("#rev").click(function(){

				//alert("123");

				var $items = $("[name = items]:checkbox");
				var $result = $("#result");

				//alert("message");

				for (var i = 0; i < $items.length; i++) {

					//alert(i+" "+!$items[i].checked);
					//$items[i].attr("checked",!$items[i].checked);
					
					$items[i].checked = !$items[i].checked;
					/*if($items[i].checked) {
						$result.html += $items[i].val();
					}*/
				}

				for (var i = 0; i < $items.length; i++) {

					
					if($items[i].checked) {
						//alert($items[i].val());
						//$result.html += $items[i].val();
					}
				}


			});

		});
		
	</script>
</head>
<body>
	
	<div>
		
		<form name="form1" id="form1" action="" method="post">
			
			test
			<br/>
			<input type="checkbox" name="items">1</input>
			<input type="checkbox" name="items">2</input>
			<input type="checkbox" name="items">3</input>
			<input type="checkbox" name="items">4</input>
			<br/>
			<input type="button" id="all" value="全选"></input>
			<input type="button" id="no" value="全不选"></input>
			<input type="button" id="rev" value="反选"></input>
			<input type="submit" id="submit" value="提交"></input>

			<label id="result">321</label>
	
		</form>
	</div>

</body>
</html>