zoukankan      html  css  js  c++  java
  • 非常简单的全选功能

       今天,看了一本书,书名叫锋利的Jquery,一看果然够锋利的,今天看到的一个全选的功能块,想跟大家分享一下!当我还不知道的时候我写了好多代码才实现这个功能的,原来这个功能还可以这么简单的就实现了,顿时蒙了,一定下决心把这本书看下去。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            #menu {
            500px;
            height:500px;
            margin:0px auto;
                    }
        </style>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function () {
                //01定位到全选按钮对象,注册单击事件
                $("input[name=qx]").click(function () {
                    /*02this.checked判断全选按钮是否选中返回true和false复选框全选中attr("checked",false)不选中attr("checked",true)选中如果当前全选按钮选中的话,就让子的*/
                     $(".yd").attr("checked",this.checked);
                });
    
                //03.定位到子的复选框对象,注册单击事件
                $(".yd").click(function () {
                    //获取整个子复选框集合
                    var $myinput = $(".yd");
                    //定位到全选按钮对象,改变attr属性值,(如果子的复选框的个数==被选中的子复选框个数)==true
                    $("input[name=qx]").attr("checked", $myinput.length == $myinput.filter(":checked").length);
    
                });
            });
        </script>
    </head>
    <body>
        <div id="menu">
            <label>你喜欢的爱好的是?</label> <br />
            <input type="checkbox" name="1" value=" " class="yd"/>足球
            <input type="checkbox" name="2" value=" " class="yd" />篮球
            <input type="checkbox" name="3" value=" " class="yd"/>羽毛球
            <input type="checkbox" name="4" value=" " class="yd"/>排球
            <input type="checkbox" name="5" value=" " class="yd"/>橄榄球<br />
            <input type="checkbox" name="qx" value=""/>全选
        </div>
    </body>
    </html>
  • 相关阅读:
    3513: [MUTC2013]idiots
    ELK+Filebeat+Kafka+ZooKeeper 构建海量日志分析平台(elk5.2+filebeat2.11)
    【python全栈开发】初识python
    SQL疑难问题
    费用分摊问题
    透过现象看本质
    关于python3round与float的四省五入精度的问题
    Win10下VSCode安装PlantUML
    安装pymssql
    ensorFlow的安装
  • 原文地址:https://www.cnblogs.com/hyjj/p/5542866.html
Copyright © 2011-2022 走看看