利用jQuery轻松实现全选/全不选,全选,全不选,反选按钮功能

上篇写到利用js实现该功能,这次利用jQuery可以更简单的实现该功能
在项目里需要添加jquery.js如图: 这里写图片描述
网页中body代码

<body>
    您的爱好很广泛!!!
    <br>
    <input type="checkbox" name="chekcItems" value="全选/全不选" id="select"/>全选/全不选
    <br>
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="游泳" />游泳
    <input type="checkbox" name="items" value="唱歌" />唱歌
    <br>
    <input type="button" name="checkall" id="checkall" value="全选" />
    <input type="button" name="checkall" id="checknotall" value="全不选" />
    <input type="button" name="checkall" id="checkreverse" value="反选" />
</body>

js中代码,注意要引用jquery.js的地址

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function() {//页面加载完执行该代码
        //找到全选/全不选框并添加点击事件
        $("input[name='chekcItems']").click(function() {
            $("input[name='items']").prop("checked",this.checked);//找到复选框添加属性checked并赋值
        });
        //找到每一个复选框并添加点击事件
        $("input[name='items']").click(function() {
            if($("input[name='items']:checked").length==$("input[name='items']").length){//被选中复选框的个数等于复选框的总个数
                $("input[name='chekcItems']").prop("checked",true);//为全选/全不选复选框添加属性checked并赋值true
            }else{
                $("input[name='chekcItems']").prop("checked",false);//否则赋值false
            }
        });
        //找到全选按钮并添加点击事件
        $("#checkall").click(function() {
            $("input[name='items']").prop("checked",true);
            $("input[name='chekcItems']").prop("checked",true);
        });
        //找到全不选按钮并添加点击事件
        $("#checknotall").click(function() {
            $("input[name='items']").prop("checked",false);
            $("input[name='chekcItems']").prop("checked",false);
        });
        //找到反选按钮并添加点击事件
        $("#checkreverse").click(function() {
            $("input[name='items']").each(function(i,n) {
                $(n).prop("checked",!this.checked);//循环复选框进行反选操作
            })
            if($("input[name='items']:checked").length==$("input[name='items']").length){//判断是否勾选全选/全不选框
                $("input[name='chekcItems']").prop("checked",true);
            }else{
                $("input[name='chekcItems']").prop("checked",false);
            }
        });
    }) 
</script>

利用jQuery轻松实现全选/全不选,全选,全不选,反选按钮功能

猜你喜欢