jquery操作checkBox的选中和事件操作(解决一次取消后不能选中)

时间：2022-09-15 23:49:47

总结一下checkBox实际开发中结合jquery常用属性和事件：

1，checkBox选中状态发生改变的方法：

$(function(){
$("#basketBall").change(function(){
alert("baseketBall  changing");
});
})

2，checkBox选中：

//选中所有的checkBox  
//第一种：$("input[type='checkbox']").attr("checked","checked");
//第二种：
$("input[type='checkbox']").each(function(){
this.checked=true;
});

3，checkBox取消选中：

$("input[value='全部取消']").on('click',function(){
//取消所有的checkBox  第一种
$("input[type='checkbox']").each(function(){
this.checked=false;
});
/*第二种
$("input[type='checkbox']").removeAttr("checked");*/
});

注意：虽然使用jquery的attr("checked","checked")和removeAttr("checked")能够完成checkBox的选中和取消，但是通过今天的实际应用发现，在使用这一组方法时，当取消所有选中之后，就不能再全部选中了；但是直接使用dom对象的this.checked来赋值true和false的时候就能够解决这个问题：附上一个例子可以参照（jquery2.1.1.js）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
	<style type="text/css">
		.showCheckboxs{
			margin:auto;
			width:300px;
			height:200px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			
			//跟全选按钮添加事件相应：  注意使用属性选择器时input[atrribute='xxx']的时候input与后面的括号不要空格
			//添加事件的的代码要放在页面初始化加载中
			$("input[value='全选']").on('click',function(){
				alert("全选");
				//选中所有的checkBox  
				//第一种：$("input[type='checkbox']").attr("checked","checked");
				//第二种：
				$("input[type='checkbox']").each(function(){
					this.checked=true;
				});
			});
			
			$("input[value='全部取消']").on('click',function(){
				//取消所有的checkBox  第一种
				$("input[type='checkbox']").each(function(){
					this.checked=false;
				});
				/*第二种
				$("input[type='checkbox']").removeAttr("checked");*/
			});
			
			$("input[value='取下标']").on('click',function(){
				var result=""; 
				$("input[type='checkbox']").each(function(){
					alert(this.checked);
					if(this.checked)
						result+=$(this).index();
				});
				alert(result);
			});
			//去的所有选中的下标
		});
		//蓝球的选中状态发生改变时候触发change（）方法
		$(function(){
			$("#basketBall").change(function(){
				alert("baseketBall  changing");
			});
		})
	</script>
</head>
<div class="showCheckboxs" id="div">
	<fieldset>
		<legend>选择您的兴趣爱好：</legend>
		<p><input type="checkbox" id="basketBall">篮球<input type="checkbox" >足球<input type="checkbox" >羽毛球 <input type="checkbox" >乒乓球
		<p><input type="button" value="全选">
		<p><input type="button" value="全部取消">
		<p><input type="button" value="取下标">
	</fieldset>
<div>
<body>
</body>
</html>

标签：

相关文章