jQuery全选、反选、全不选

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34365635

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量45

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyeye14/p/6163573.html

本文介绍了一种使用HTML、CSS和JavaScript实现全选、全不选及反选功能的方法。通过简单的用户界面，可以方便地对列表项进行操作。文章提供了完整的代码示例，包括如何使用jQuery简化DOM操作。

原文链接：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);