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>
  • 相关阅读:
    C#生成CHM文件(外篇使用hha.dll)
    prototype原理详解
    避免在代码中直接任意使用ConfigurationManager.AppSettings
    页面生命周期的来龙去脉(详细)
    nRF52832 SAADC sampling
    nRF52832开发日志--SAADC调试
    boost学习笔记(七)---date_time库
    Boost学习笔记(六) progress_display注意事项
    Boost学习笔记(五) progress_display
    扩展progress_timer的计时精度
  • 原文地址:https://www.cnblogs.com/GainLoss/p/6073524.html
Copyright © 2011-2022 走看看