<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
form{
width: 400px;
margin: 50px auto;
}
</style>
</head>
<body>
<form action="" method="post">
你爱好的运动是?<input type="checkbox" id="checkedAll" />全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="蓝球" />篮球
<input type="checkbox" name="items" value="网球" />网球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br>
<input type="button" id="checkedAllBtn" value="全选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="invertBtn" value="反选" />
<input type="button" id="submit" value="提交" />
</form>
</body>
</html>
<script src="jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let checkedAll = $('#checkedAll');
let items = $(':input[name=items]');
$('#checkedAllBtn').click(function(){
items.prop('checked',true);
checkedAll.prop('checked',true);
});
$('#checkedNoBtn').click(function(){
items.prop('checked',false);
checkedAll.prop('checked',false);
})
$('#invertBtn').click(function(){
items.each(function(){
this.checked = !this.checked
});
let length = items.filter(':checked').length;
checkedAll.prop('checked',length==5);
})
items.click(function(){
let length = items.filter(':checked').length;
checkedAll.prop('checked',length==5);
})
$('#submit').click(function(){
items.filter(':checked').each(function(){
let a = this.value;
console.log(a)
})
});
checkedAll.click(function(){
items.prop('checked',this.checked)
})
</script>