<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.js"></script>
<script>
$(function(){
//全选
$("#chkAll").click(function(){
$("input[name=interest]").prop("checked", $(this).prop("checked"));
})
//反选
$("#btnReverse").click(function(){
$("input[name=interest]").each(function(){
$(this).prop("checked", !$(this).prop("checked"));
})
checkAll();
})
//检查全选状态
$("input[name=interest]").click(function(){
checkAll();
})
function checkAll(){
$("#chkAll").prop("checked", $("input[name=interest]:checked").length==$("input[name=interest]").length)
}
})
</script>
</head>
<body>
<input type="checkbox" name="interest"/>唱歌
<input type="checkbox" name="interest"/>跳舞
<input type="checkbox" name="interest"/>跑步
<input type="checkbox" name="interest"/>游泳
<br/>
<input type="checkbox" id="chkAll"/>全选
<input type="button" value="反选" id="btnReverse"/>
</body>
</html>
