JQ实现全选、反选功能 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
   ul{list-style: none;}
</style>
</head>
<body>
<input type="checkbox" id="all">全选/取消全选
<button id="no">反选</button>
<ul>
	<li>
		<input type="checkbox" value="苹果" name="fr">苹果
	</li>
	<li>
		<input type="checkbox" value="香蕉" name="fr">香蕉
	</li>
	<li>
		<input type="checkbox" value="葡萄" name="fr">葡萄
	</li>
	<li>
		<input type="checkbox" value="橘子" name="fr">橘子
	</li>
</ul>
<button id="getData" style="display:none;">获取选中数据</button>
<div id="result"></div>
<script src="../jquery.js"></script>
<script>
//全选、取消全选
$("#all").click(function(){
	var ck=$(this).prop("checked")
	$("ul :checkbox").prop("checked",ck);
	$("#getData").click();
})

//反选按钮
$("#no").click(function(){
	$("ul :checkbox").each(function(i,v){//遍历匹配到的checkbox
		//$(this)指遍历到的每一个checkbox
		$(this).prop("checked",!$(this).prop("checked"));
	})
	//如果ul里的checkbox数量=选中的数量，all被选中
	$("#all").prop("checked",$("ul :checkbox").length==$("ul :checked").length);
	$("#getData").click();
})


//将选中的数据显示在页面
$("#getData").click(function(){
	var allArr=[];
	$("ul :checkbox").each(function(i,v){
		if($(this).prop("checked")){
			allArr.push($(this).val());
		}
	})
	$("#result").html(allArr.join("-"))
})

//ul下的每一个checkbox点击，会影响全选框的状态
$("ul :checkbox").click(function(){
	$("#all").prop("checked",$("ul :checkbox").length==$("ul :checked").length)
	$("#getData").click();
})

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

　　

posted @ 2021-04-13 14:23  sunyaning  阅读(205)  评论(0)    收藏  举报