jQuery设置全选和全反选

最新推荐文章于 2022-08-29 21:32:04 发布

weixin_30568715

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hapday/p/6561969.html

本文介绍了一种使用HTML和JavaScript实现全选与反选功能的方法。通过一个全选复选框控制多个子项复选框的状态，并通过子项状态的变化来更新全选复选框的状态。

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

 
 
 
HTML 代码：

<input type="checkbox" id="allChecked" onclick="setAllChecked(this.checked)" />
<input type="checkbox" name="hobby" onclick="setCheckedAll()" value="1" />

JavaScript 脚本：

/**
 * 设置“全选”或“全反选”
 */
var setAllChecked = function(isAllChecked){
	if(isAllChecked) {
		$('input[name=hobby]').prop("checked", true);
	} else {
		$('input[name=hobby]').prop("checked", false);
	}
}




/**
 * 设置“选全”或“反选全”
 */
var setCheckedAll = function(){
	var hobbyCount = $('input[name=hobby]').length;
	var checkedCount = $('input[name=hobby]:checked').length;
	
	if(hobbyCount === checkedCount) {
		$('#allChecked').prop("checked", true);
	} else {
		$('#allChecked').prop("checked", false);
	}
}

转载于:https://www.cnblogs.com/hapday/p/6561969.html