【jQuery】复选框的全选、反选，判断哪些复选框被选中

最新推荐文章于 2023-11-06 08:00:00 发布

yongh701

最新推荐文章于 2023-11-06 08:00:00 发布

阅读量3.4k

点赞数

分类专栏： jQuery 文章标签： jquery attr prop each checkbox

本文链接：https://blog.csdn.net/yongh701/article/details/46386185

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文与《【JavaScript】复选框的全选、反选，判断哪些复选框被选中》（点击打开链接）为姊妹篇，把里面内容再与jQuery框架中实现一次，同样做到如下的效果：

布局还是同样的布局，只是由于在jQuery框架中，无须再为按钮，指定特定的onclick事件处理函数，直接使用jQuery指定即可：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>全选、反选</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    </head>
    <body>
	<button id="selected"/>哪里复选框被选中？ </button>
	<button id="selectAll"/>全选</button>
	<button id="selectReserve"/>反选</button><br/>
	1<input type="checkbox" name="checkBoxGroup" value="1"/><br/>
	2<input type="checkbox" name="checkBoxGroup" value="2"/><br/>
	3<input type="checkbox" name="checkBoxGroup" value="3"/><br/>
	4<input type="checkbox" name="checkBoxGroup" value="4"/><br/>
</body>
</html>

之后在jQuery中，取name为checkBoxGroup的复选框数组，直接可以这样写：$(":checkbox[name='checkBoxGroup']")，当然$("input[type='checkbox'][name='checkBoxGroup']")也行，只是$(":checkbox[name='checkBoxGroup']")代码更加简单，注意checkbox前面的冒号。拿出来的东西是与Javascript的document.getElementsByName("xx")一样，同位复选框数组。只是在jQuery中可以直接利用each去遍历。为复选框设置选中与否使用prop，不要用attr，具体在《【jQuery】对于复选框操作的attr与prop》（点击打开链接）已经说过了。

<script type="text/javascript">
	//哪里复选框被选中？
	$("#selected").click(function(){
		var str="被选中的复选框：";
		$(":checkbox[name='checkBoxGroup']:checked").each(function(){
			str+=$(this).val()+",";
		});
		alert(str);
	});
	//全选
	$("#selectAll").click(function(){
		$(":checkbox[name='checkBoxGroup']").each(function(){
			$(this).prop("checked",true);
		});
	});
	//反选
	$("#selectReserve").click(function(){
		$(":checkbox[name='checkBoxGroup']").each(function(){
			$(this).prop("checked",!$(this).prop("checked"));
		});
	});	
</script>