jquery 实现checkbox全选

时间:2021-12-01 09:54:04
<body>
<div><input type="checkbox" id="all"/>全选</div>
<input class="t" type="checkbox" value="aa"/>aa
<input class="t" type="checkbox" value="bb"/>bb
<input class="t" type="checkbox" value="cc"/>cc
<input class="t" type="checkbox" value="dd"/>dd
<input type="button" id="btn"  value="点击获取数据"/>
<input type="text" id="text" />
<input type="button" id="sel"  value="设置选中"/>
</body>

<script type="text/javascript">
//设置全选
$(document).ready(function(e){
    $("#all").click(function(){
		var ck=$(".t");
		var xz=$(this)[0].checked;//获取全选的选中状态
		ck.prop("checked",xz);
		})
	//获取value值	
	$("#btn").click(function(){
		var ck=$(".t");
		for(var i=0;i<ck.length;i++)
		{
			if(ck.eq(i).prop("checked")){//eq(i) 代表第几项的意思
				alert(ck.eq(i).val());
				}
			}
			})	
	//设置某项选中	
	$("#sel").click(function(){
		var v = $("#text").val();//取文本框里的值
		var ck = $(".t");   //找到checkbox
		ck.prop("checked",false); //设置不被选中
		for(var i=0;i<ck.length;i++)
		{
			if(ck.eq(i).val()==v)//判断文本框的值是否与checkbox的name值相同
			{
				ck.eq(i).prop("checked",true);//设置被选中
				}
			}
		})	
});
</script>