<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <input type="checkbox" id="check_all">全选</br>
    <input type="checkbox" class="check_item">1</br>
    <input type="checkbox" class="check_item">2</br>
    <input type="checkbox" class="check_item">3</br>
    <input type="checkbox" class="check_item">4</br>

</body>
<script> $("#check_all").click(function () {//鼠标点击事件 $(".check_item").prop("checked", $(this).prop("checked"))//所有类为check_item的属性打√ //选中的时候返回true，否则为false //使得id为check_all的原生属性值与class为check_item的保持一致 }); $(document).on("click", ".check_item", function () {//对class绑定一个点击事件 var flag = $(".check_item:checked").length == $(".check_item").length; //如果选中的框数等于总框数的，那么flag的结果返回true $("#check_all").prop("checked",flag) //这时候让id为check_all，也就是全选按钮也为true，那么全选按钮也就打√了 }) </script>
</html>

只要考察prop与checked的用法
只要有一个不选，那么全选的按钮就会为空

1234全部都选了，全选也就选上了