jquery 操作复选框问题集锦-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_343/article/details/81893775

1. jquery操作复选框是使用频繁的一个操作

2. 看看源码

<!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>
 <!--   引入jQuery -->
 <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     //全选
     $("#CheckedAll").click(function(){
	     $('input[name=items]:checkbox').attr('checked', true);
	 });

	 //输出值
	$("#send").click(function(){
		var str="你选中的是：\r\n";
		$("input[name='items']:checkbox:checked").each(function(){
			str+=$(this).val()+"\r\n";
		})
		alert(str);
	});
  })
  </script>
</head>
<body>
<form method="post" action="">
   你爱好的运动是？
   <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="send" value="提　交"/> 
</form>
</body>
</html>

3. 对于复选框选中的测试

input[name='items'][checked=true]    ff3.6 ie7都可以运行
input[name='items']:checkbox[checked=true]    ff3.6 ie7都可以运行 
input[name='items'][checked]    ff3.6不可以 ie7可以运行
input[name='items']:checkbox[checked]    ff3.6 ie7 都可以运行
input[name='items'][checked=checked]    ff3.6 ie7 都不能运行
input[name='items']:checkbox[checked=checked]    ff3.6 ie7 都不能运行
input[name='items']:checked    ff3.6 ie7 都可以运行
input[name='items']:checkbox:checked    ff3.6 ie7 都可以运行