jQuery全选反选

checked

根据选项checked true判断全选checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
    <!--<script src="jquery3.x.js"></script>-->
    <script>
        $(function () {
            //另外的思路，当选中的个数小于选项的个数，全选 false    =true
            $("#d1").click(function () {//this点击的谁的结果集的DOM对象
                $(":checkbox[name=na]").prop("checked", $(this).prop("checked")); //jquery中的checked 是true来表示checked="checked"
            })


            //有一个选项没有选中，全选要取消
            //选项 全部选中，全选要选中
            //给选项checkedbox注册事件
            //为全部选中，全选要选中。循环结束做准备
            $(":checkbox[name=na]").click(checkSingle); //此写方法名，不带().只是注册，不是调用

            //反选
            $("#d2").click(function () {
                $(":checkbox[name=na]").each(function () {//this each的谁的结果集的DOM对象
                    //对选项的状态取反
                    $(this).prop("checked", !$(this).prop("checked"));
                    checkSingle();

                });
            })
        })
        //根据选项check判断全选是否被选中 根据子的checkbox判断父的checkbox是否被选中
        function checkSingle() {
            //假设父的checkbox被选中
            var isCk = true;
            $(":checkbox[name=na]").each(function () {
                if (!$(this).prop("checked")) {//有一个选项没有选中
                    isCk = false;
                    return false; //break.循环跳出   //return true 相当continue 跳出本次循环 继续下次循环
                }
            });
            //设置父的CheckBox选中状态
            $("#d1").prop("checked", isCk);

        }
    </script>
</head>
<body>
<input type="checkbox" name="na" value="c1"/>吃饭
<input type="checkbox" name="na" value="c2"/>睡觉
<input type="checkbox" name="na" value="c3"/>看电视

<input type="checkbox" id="d1"/>全选
<input type="button" value="反选" id="d2"/>
</body>
</html>