zoukankan      html  css  js  c++  java
  • jQuery全选、反选、全不选

    原文链接:https://yq.aliyun.com/articles/33443

    HTML内容部分:

    <ul id="items">
                <li>
                    <label><input type="checkbox" />item1</label>
                </li>
                <li>
                    <label><input type="checkbox" />item2</label>
                </li>
                <li>
                    <label><input type="checkbox" />item3</label>
                </li>
                <li>
                    <label><input type="checkbox" />item4</label>
                </li>
                <li>
                    <label><input type="checkbox" />item5</label>
                </li>
                <li>
                    <label><input type="checkbox" />item6</label>
                </li>
                <li>
                    <label><input type="checkbox" />item7</label>
                </li>
                <li>
                    <label><input type="checkbox" />item8</label>
                </li>
            </ul>
            <p id="selection">
                <label><input type="checkbox" class="select-all" />全选</label>
                <label><input type="checkbox" class="select-none" />全不选</label>
                <label><input type="checkbox" class="select-reverse" />反选</label>
                <label><input type="checkbox" class="switch" />全选/全不选</label>
            </p>

    CSS部分:

    #items{
                list-style: square;
            }
            #items li{
                margin-bottom: 20px;
            }
            #selection{
                margin-top: 50px;
            }
            #selection label{
                margin-right: 30px;
            }

    Javascript部分:

    $(document).ready(function(){
                //全选
                $(".select-all").click(function(){
                    $("#items input").prop("checked",true);
                    $(".select-none,.select-reverse,.switch").prop("checked",false);
                });
                //全不选
                $(".select-none").click(function(){
                    $("#items input,.select-all,.select-reverse,.switch").prop("checked",false);
                });
                //反选
                $(".select-reverse").click(function(){
                    //使用each()方法规定每个匹配元素规定运行的事件
                    $("#items input").each(function(){
                        $(this).prop("checked",!$(this).prop("checked"));
                        $(".select-all,.select-none,.switch").prop("checked",false);
                    })
                });
                //全选/全不选
                $(".switch").click(function(){
                    //使用is()方法来遍历input元素,根据选择器、元素或jQuery对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回true。
             //问号代表判断,冒号代表否则……
             //如果$("#items input").is(":checked")为真或不等于0

             //那么返回$("#items input").prop("checked",false)否则返回$("#items input").prop("checked",true)
             
    $("#items input").is(":checked")?$("#items input").prop("checked",false):$("#items input").prop("checked",true);
             $(".select-all,.select-none,.select-reverse").prop("checked",false);
                });
            })
  • 相关阅读:
    让delphi2010能有delphi7的版面布局
    多线程的基本概念和Delphi线程对象Tthread介绍
    Delphi编写后台监控软件
    delphi 2010是动画GIF的支持方法
    delphi 资源文件详解
    delphi 基础之四 delphi 组织结构
    delphi 基础之三 编写和调用dll文件
    delphi 基础之三 文件流操作
    mysql (5.7版本)---的配置
    session--保持登录20分钟,常用与用户登录状态
  • 原文地址:https://www.cnblogs.com/wangyeye14/p/6163573.html
Copyright © 2011-2022 走看看