jQuery中复选框checkbox实现复选框的全选/全不选，点击按钮实现复选框的全选/全不选/反选

最新推荐文章于 2025-05-20 09:28:00 发布

原创最新推荐文章于 2025-05-20 09:28:00 发布 · 2.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery中复选框checkbox实现复选框的全选/全不选，点击按钮

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何使用jQuery实现复选框的全选、全不选及反选功能，包括通过点击特定复选框或按钮来统一控制一组复选框的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <table>
	<tr>
	 	<td>
			<input type="checkbox" name="check" />1
			<input type="checkbox" name="check" />2
			<input type="checkbox" name="check" />3
			<input type="checkbox" name="check" />4
			<input type="checkbox" name="check" />5
			<input type="checkbox" name="check" />6
		</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name="all" />全选/全不选
			<input type="button" name="checkAll" id="checkAll" value="全选" />
			<input type="button" name="checkNo" id="checkNo" value="全不选" />
			<input type="button" name="checkRev" id="checkRev" value="反选" />
		</td>

	</tr>

</table>

点击复选框实现全选/全不选
当点击全选/全不选的复选框时，DOM对象this.checked获取的状态通过prop()方法将所有的复选框设置为同一状态，第一次点击时即为全选状态

   // 全选/全不选 
    $("input[name='all']").click(function(){
    	$("input[name='check']").prop("checked",this.checked);
    });

在这里插入图片描述
点击全选按钮实现全选
当点击全选按钮通过:checkbox复选框过滤器将所有的复选框状态设置为true即选中状态。

// 全选按钮
$("#checkAll").click(function(){
	$("input:checkbox").prop("checked",true);
});

在这里插入图片描述
点击全不选按钮实现复选框全部取消

// 全不选
$("#checkNo").click(function(){
	$("input:checkbox").prop("checked",false);
});

在这里插入图片描述
将选中的复选框实现反选

// 反选
$("#checkRev").click(function(){
	$("input[name='check']").each(function(){
		this.checked = !this.checked;
	});   	
});