jQuery全选反选 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
                //全选
                $("#chkAll").click(function(){
                    $("input[name=interest]").prop("checked", $(this).prop("checked"));
                })
            

            //反选
                $("#btnReverse").click(function(){
                    
                    $("input[name=interest]").each(function(){
                        $(this).prop("checked", !$(this).prop("checked"));
                    })
                    
                    checkAll();
                    
                })

                //检查全选状态
                $("input[name=interest]").click(function(){
                    checkAll();
                })
                function checkAll(){
                    $("#chkAll").prop("checked", $("input[name=interest]:checked").length==$("input[name=interest]").length)
                }
            
            })
    </script>
</head>
<body>
    <input type="checkbox" name="interest"/>唱歌
        <input type="checkbox" name="interest"/>跳舞
        <input type="checkbox" name="interest"/>跑步
        <input type="checkbox" name="interest"/>游泳
        
        <br/>
        
        <input type="checkbox" id="chkAll"/>全选
        <input type="button" value="反选" id="btnReverse"/>
</body>
</html>

 

 

 

 

 

 

 

posted @ 2021-04-20 17:10  Hhhr  阅读(44)  评论(0)    收藏  举报