jquery实现复选框的全选、全不选、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>

    </style>
</head>
<body>
    选择喜欢的运动<input type="checkbox">全选
    <br/>
    <input type="checkbox" class="item">篮球
    <input type="checkbox" class="item">足球
    <input type="checkbox" class="item">羽毛球
    <input type="checkbox" class="item">冰棒球
    <br/>
    <button id="selectAll">全选</button>
    <button id="notSelect">全不选</button>
    <button id="reverseSelect">反选</button>

<script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
    var $lis=$("[type=checkbox]:first")
    var $items=$(".item");
    $("#selectAll").click(function(){
        $items.prop("checked",true);
        $lis.prop("checked",true);
    });
    $("#notSelect").click(function(){
        $items.prop("checked",false);
        $lis.prop("checked",false);
    });
    $("#reverseSelect").click(function(){
        $items.each(function(){
            this.checked=!this.checked;
        });
        $lis.prop("checked",$items.not(":checked").length===0)
    });
    $lis.click(function(){
        $items.prop("checked",this.checked);
    })
    $items.click(function(){
        $lis.prop("checked",$items.not(":checked").length===0)
    })



</script>
</body>
</html>

 

posted @ 2018-06-14 14:57  心晴安夏  阅读(593)  评论(0编辑  收藏  举报