jQuery插件_全选反选-蒲公英云

jQuery插件_全选反选

灰太狼 2022-05-08 09:52 411阅读 0赞

效果

代码：

1、jQuery插件的代码（allCheck.js）

//1、定义全选的插件
jQuery.fn.extend({
    bindCheck:function($subCheckBox,$btnUncheck){
        let $allCheckBox = this;
        //1、给全选复选框绑定click事件
        //this:是全选复选框（jQuery对象）
        this.click(function(){
            let isChecked = this.checked;
            $subCheckBox.each(function(){
                this.checked = isChecked;
            });
        });
        //2、给反选
        if(arguments.length==2){
            $btnUncheck.click(function(){
                $subCheckBox.each(function(){
                    this.checked = !this.checked;
                });
                reversCheck();
            });
        }
        //3、给每个选择项的复选框绑定事件
        $subCheckBox.click(function(){
            reversCheck();
        });
        function reversCheck(){
            //1、判断是否全部的复选框被选中
            let isAllChecked = true;
            $subCheckBox.each(function(){
                if(!this.checked){
                    isAllChecked = false;
                }
            });
            //2、处理全选复选框
            $allCheckBox.attr("checked",isAllChecked);
        }
    }
});

2、使用插件的代码（html文件）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        选择你喜欢的水果:<br/>
        <input id="chkAll" type="checkbox" />全选
        <input id="btnUnCheck" type="button"  value="反选" /> <br/>
        <div id="FruitBox">
            <input type="checkbox" />苹果<br/>
            <input type="checkbox" />香蕉<br/>
            <input type="checkbox" />猕猴桃<br/>
            <input type="checkbox" />梨<br/>
            <input type="checkbox" />樱桃<br/>
        </div>
    </body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/allCheck.js"></script>
<script type="text/javascript">
$(function(){
    $("#chkAll").bindCheck($("#FruitBox :checkbox"),$("#btnUnCheck"));
});
</script>