<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
width: 300px;
height: 170px;
border: 1px solid #c0d9ff;
margin: auto;
}
#title, #state {
margin-left: 5px;
width: 280px;
height: 30px;
border: 1px solid #c0d9ff;
}
#name {
width: 280px;
height: 30px;
border: 1px solid #c0d9ff;
padding-top: 10px;
margin-top: 10px;
margin-left: 5px;
}
</style>
</head>
<body>
<p id="title">问卷调查：你最喜欢的歌手是谁？</p>
<div id="state">
<!-- name相同时，按钮不会同时为选中状态-->
<input class="selectAll" type="radio" name="0">全选
<input class="selectNone" type="radio" name="0">全不选
<input class="invertSelect" type="radio" name="0">反选
</div>
<div id="name">
<input type="checkbox">刘德华
<input type="checkbox">张学友
<input type="checkbox">孙燕姿
<input type="checkbox">刘欢
</div>
<script src="adapter/jquery-3.4.1.js" type="text/javascript"></script>
<script>
//全选
$(function () {
$(".selectAll").on("click", function () {
$(":checkbox").prop("checked", true);
});
//全不选
$(".selectNone").on("click", function () {
$(":checkbox").prop("checked", false);
});
//取反
$(".invertSelect").on("click", function () {
// :checkbox 是type中的选择器，选择全部 type为checkbox的属性
$(":checkbox").each(function(){
$(this).prop("checked",!this.checked);
})
});
})
</script>
</body>
</html>
