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

时间：2022-07-19 16:44:45

基本思路：

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>

 

标签：

相关文章