jq实现全选、全不选、反选

时间：2023-03-09 15:40:28
jq实现全选、全不选、反选

基本思路：

1全选：点击全选按钮的时候，将input的属性checked设置为true;

2全不选：点击全不选按钮的时候，将input的属性checked设置为false;

3反选：点击反选按钮的时候，提取出当前转态的时候，已经被选中的input的索引值，然后将被选中的按钮的属性checked设置为false；没有被选中使一样的道理；

注意：想要获取到input的checked不能用attr应该用prop；checked为true的时候input被选中，checked为false的时候input未被选中；

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <label>全选</label><input type="checkbox" class="allclick"/>

        <label>全不选</label><input type="checkbox" class="allnoclick"/>

        <label>反选</label><input type="checkbox" class="noclick"/>

        <div class="box">

            <input type="checkbox" data-click="yes"/>

            <input type="checkbox" data-click="yes"/>

            <input type="checkbox" data-click="yes"/>

            <input type="checkbox" data-click="yes"/>

        </div>

        <script src="js/jquery-1.7.2.js"></script>

        <script>

        $(function(){

            //全选 只是针对全选

            $(".allclick").click(function(){

                var mark=$(".allclick").prop("checked");

                if(mark==true){

                    $(".box input").prop("checked",true);

                }

            });

            //全不选 只是针对全不选中

            $(".allnoclick").click(function(){

                var mark=$(".allnoclick").prop("checked");

                if(mark==true){

                    $(".box input").prop("checked",false);

                }

            });

            //反选

            $(".noclick").click(function(){

                $(".box input").each(function(i){

                    var mark=$(".box input").eq(i).prop("checked");

                    if(mark==true){//已经被选中

                        $(".box input").eq(i).prop("checked",false);

                    }else if(mark==false){//没有被选中

                        $(".box input").eq(i).prop("checked",true);

                    }

                });

            });

        });

        </script>

    </body>

</html>

相关文章