bootstrap中checkbox全选，反选

最新推荐文章于 2025-06-15 09:30:53 发布

原创最新推荐文章于 2025-06-15 09:30:53 发布 · 9.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap checkbox

本文介绍了一个使用jQuery简化Checkbox选择操作的实例，包括全选、全不选及反选功能的实现方式。通过简单的按钮点击事件，可以轻松地控制一组复选框的状态。

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

<span style="white-space:pre">	</span>$("#selectAll").click(function () { 
		$("#owners input:checkbox").each(function () {   
			$(this).prop('checked', true);//

	    }); 
	}); 
	
	$("#unSelect").click(function () {   
		   $("#owners input:checkbox").removeAttr("checked");  
		}); 
	
	$("#reverse").click(function () {  
	    $("#owners input:checkbox").each(function () {   
	    	this.checked = !this.checked;  
	    }); 
	});

注：

.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false

<input type="button" value="全选" class="btn" id="selectAll">   
<input type="button" value="全不选" class="btn" id="unSelect">   
<input type="button" value="反选" class="btn" id="reverse">