多选框一键全选

最新推荐文章于 2024-07-09 14:10:47 发布

wybxzht

最新推荐文章于 2024-07-09 14:10:47 发布

阅读量1.4k

点赞数

分类专栏：实例小练习文章标签： js css html5

本文链接：https://blog.csdn.net/wybxzht/article/details/108549422

版权

这篇博客介绍了如何使用HTML5、CSS和JavaScript实现多选框的一键全选、全不选、反选功能。通过示例代码展示了具体的实现过程，包括界面展示和代码细节，帮助读者理解并实践这种常见交互效果。

摘要由CSDN通过智能技术生成

实现了：

一键全选，全不选
反选
根据多选框是否全选/全不选，更改显示

界面：

在这里插入图片描述

代码：

html：

    <dl>
        <dt>
            <input type="checkbox" id="all"><label for="all">全选</label>
            <a href="javascript:" id="Reverse">反选</a>
        </dt>
        <dd>
            <p><label><input type="checkbox" />　选项（一）</label></p>
            <p><label><input type="checkbox" />　选项（二）</label></p>
            <p><label>