效果圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<label><input type="checkbox" name="fruit" id=1 οnclick="isAllCheck()" value="蘋果">蘋果<br></label>
<label><input type="checkbox" name="fruit" id=2 οnclick="isAllCheck()" value="香蕉">香蕉<br></label>
<label><input type="checkbox" name="fruit" id=3 οnclick="isAllCheck()" value="西瓜">西瓜<br></label>
<label><input type="checkbox" name="fruit" id=4 οnclick="isAllCheck()" value="桃子">桃子<br></label>
<label><input type="checkbox" name="fruit" id=5 οnclick="isAllCheck()" value="橙子">橙子<br></label>
<label><input type="checkbox" name="all1" id="all1" value="全選" οnclick="allCheck1(this)">全選</label>
<label><input type="checkbox" name="all2" id="all2" value="反選" οnclick="allCheck2()">反選</label>
</form>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//全選全不選
function allCheck1(obj){
$('[name=fruit]:checkbox').each(function(){
this.checked =obj.checked;
})
}
//每次點擊判斷是否全選中
function isAllCheck(){
$(' #all1')[0].checked=$('[name=fruit]:checkbox').length==$('[name=fruit]:checked').length
}
//反選
function allCheck2(){
$('[name=fruit]:checkbox').each(function(){
this.checked =!this.checked;
})
isAllCheck();
}
</script>
</html>