Jquery实现全选反选

先引入jQuery文件

<script src="jquery-3.6.0.js"></script>

创建以下元素

<h1>爱好:</h1>
		<input type="checkbox" class="itemall"><label>全选</label><br><br>
		<input type="checkbox" class="item" value="游泳"><label>游泳</label>
		<input type="checkbox" class="item" value="爬山"><label>爬山</label>
		<input type="checkbox" class="item" value="听音乐"><label>听音乐</label>
		<input type="checkbox" class="item" value="学web"><label>学web</label>
		<p>当前选中的爱好:<b class="aihao"></b></p>

js代码

<script>
			var $inp = $(".item");
			var $all = $(".itemall");
			//反选
			$inp.click(() => {
				var xz=$inp.filter(':checked').each(function(){});
				if(xz.length==$inp.length){
					$all.prop('checked', true);
				}else{
					$all.prop('checked', false);
				}
				xrAihao();
			})
			//全选
			$all.click(function(){
				$inp.each((index,item)=>{
					item.checked=this.checked;
				})
				xrAihao();
			})
			//渲染选中的
			function xrAihao(){
				var aihao=[];
				var xz=$inp.filter(':checked').each(function(){
					aihao.push(this.value);
				})
				$(".aihao").text(aihao)
			}
		</script>