jquery实现复选框全选、反选

HTML:

<input id="all" type="checkbox" value="" />
<label for="all">全选</label>

<input id="fan" type="checkbox" value="" />
<label for="fan">反选</label>

<button id="getValue">获得所有选中值</button>
<ul class="list">
 	<li><input type="checkbox" value="Monday" />周一</li>
 	<li><input type="checkbox" value="Tuesday" />周二</li>
 	<li><input type="checkbox" value="Wednesday" />周三</li>
 	<li><input type="checkbox" value="Thursday " />周四</li>
 	<li><input type="checkbox" value="Friday" />周五</li>
</ul>

1.全选/全不选

当勾选全选，列表中所有复选框全部选中，反之取消勾选，列表中所有复选框全部呈未选中状态

$('#all').click(function(){
	if($(this)[0].checked){
		// 全选
		$(".list :checkbox").prop("checked",true)
	}else{
		//全不选
		$(".list :checkbox").prop("checked",false)
	}
})

2.反选

当勾选反选，列表中所有被选中的选项变为未选中状态，而所有未选中的选项变为已选中状态

// 反选
$('#fan').click(function(){
	$('.list :checkbox').each((index,item)=>{
		$(item).prop("checked",!$(item).prop("checked"))
	})
	checkall()
})

3.获取选中的值

// 获得选中值
$('#getValue').click(function(){
	let newVal=[]
	$('.list :checkbox:checked').each(function(){
		newVal.push($(this).val())
	})
	console.log(newVal)
})

4.checkall() ------检测列表中复选框选中数量状态：全选/非全选

// 选中列表任意复选框 检查是否全部选中
$('.list :checkbox').click(function(){
	checkall()
})
function checkall(){
	let checkNum=$('.list :checkbox').length
	let n=0
	$('.list :checkbox').each(function(){
		if($(this).prop('checked')===true){
		n++
		}
	})
	if(n===checkNum){
		// 全选
		$('#all').prop('checked',true)
		}else{
		//非全选
		$('#all').prop('checked',false)
	}
}

文章来源个人博客：https://www.garfield27.com/2021/11/04/4a7b2a86b6d4/