两种方法实现全选、全不选、反选

最新推荐文章于 2022-09-15 01:01:01 发布

仰柔川

最新推荐文章于 2022-09-15 01:01:01 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/yyk5928/article/details/89763027

版权

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

博客介绍了效果图的实现方式，分别使用了jQuery和JS来完成。这两种技术在前端开发中较为常用，能帮助开发者实现不同的页面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

效果图

01 使用jquery实现

    <script>
        $(document).ready(function () {
            //全选
            $("#checkAll").click(function () {
                $("[name=checkbox]:checkbox").prop("checked", true);
            });
            //全不选
            $("#checkNo").click(function () {
                $("[name=checkbox]:checkbox").prop("checked", false);
            });
            //反选
            $("#inverse").click(function () {
                $("[name=checkbox]:checkbox").each(
                    function () {
                        $(this).prop("checked", !$(this).prop("checked"));
                    }
                )
            });
        });
    </script>

02 使用js实现

        //获取所有的复选框
        var check = document.getElementsByName("checkbox");
        function checkAll() {
            //遍历复选框 使每个复选框的属性checked为true
            for (var i = 0; i < check.length; i++) {
                check[i].checked = true;
            }
        }
        function checkNo() {
            for (var i = 0; i < check.length; i++) {
                check[i].checked = false;
            }
        }
        function inverse() {
            //遍历复选框 对复选框的属性checked取反
            for (var i = 0; i < check.length; i++) {
                check[i].checked = !check[i].checked;
            }
        }