jQuery实现复选框的全选/全不选，反选，提交

0 0

jQuery实现复选框的全选/全不选，反选，提交5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#checkAll").click(function(){
			$("[name=items]:checkbox").attr("checked",true);
		});
		$("#checkNo").click(function(){
			$("[name=items]:checkbox").attr("checked",false);
		});
		$("#checkRev").click(function(){
			$("[name=items]:checkbox").each(function(){
				$(this).attr("checked",!$(this).attr("checked"));
			});
		});
		//这里send的click事件根本就没有触发
		$("#send").click(function(){
			var str="你选中的是：\r\n";
			$("[name=items]:checkbox:checked").each(function(){
				str+=$(this).val()+"\r\n";
			});
			alert(str);
		});
	});
</script>
</head>
<body>
	<form action="#">
		你爱好的运动是：<br>
		<input type="checkbox" name="items" value="soccer" id="soccer"><label for="soccer">足球</label>
		<input type="checkbox" name="items" value="basketball" id="basketball"><label for="basketball">篮球</label>
		<input type="checkbox" name="items" value="badminton" id="badminton"><label for="badminton">羽毛球</label>
		<input type="checkbox" name="items" value="table_tennis" id="table_tennis"><label for="table_tennis">乒乓球</label><br>
		<input type="button" id="checkAll" value="checkAll">
		<input type="button" id="checkNo" value="checkNo">
		<input type="button" id="checkRev" value="checkRev">
		<input type="button" id="send" value="submit">
	</form>
</body>
</html>

这段代码是参照《锋利的jQuery》和书上相同，但是我用的是最新的1.11.1的jQuery库，无法实现全选/全不选/反选的功能，参照FireBug查看源码，虽然每个button的checked的属性发生变化，但是前面的选项框并没有被钩中，但是改用源码提供的1.7的jQuery库后就成功了。请问如何使用最新的1.11.1的库实现实现一样的功能！

补充：书上提供的jQuery的代码

$(this).attr("checked", !$(this).attr("checked"));

根本不能实现反选的功能，必须替换成

this.checked=!this.checked;

JS的原生代码才能成功，我看书很仔细，这个问题是在不能解答，请有精力和兴趣的大神们帮助解答一下，先谢了！

jQuery

2014年8月01日 07:36

bh1990
25
0 0 3

3个答案按时间排序按投票排序

0 0

版本间的差异，最好直接查对应的API说明。

2014年8月02日 15:17

freezingsky
159
1 1 16

添加评论

0 0

全选
$('input[type=checkbox]').prop('checked', true);

不选
$('input[type=checkbox]').prop('checked', false);

反选
 $('input[type=checkbox]').prop('checked', 
			function(index, val){
				return !val;
			});

2014年8月01日 09:22