zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    POJ 2486
    奇怪的电梯
    穿越泥地(mud)
    救援行动(save)
    As Fast As Possible
    Connecting Universities
    They Are Everywhere
    Cells Not Under Attack
    吃饭
    花店橱窗(flower)
  • 原文地址:https://www.cnblogs.com/GainLoss/p/6073524.html
Copyright © 2011-2022 走看看