（html/js）多选复选框自动全选/反选实例

AMX50B

于 2016-11-29 10:49:58 发布

阅读量978

点赞数

CC 4.0 BY-SA版权

分类专栏： hdu 前端知识点文章标签： html 实例 js 复选框全选

本文链接：https://blog.youkuaiyun.com/amx50b/article/details/53389848

这篇博客介绍了如何使用HTML和JavaScript实现复选框的全选和反选功能。通过示例代码，展示了在点击全选按钮时，能够自动选中所有复选框选项的实现过程。

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

测试结果：

点击全选时，选中所有选项：

html部分代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <script src="Test.js"></script>
    <title>全选/复选框</title>
</head>
<input id="all" type="checkbox" value="false"/>全选</br>
<div id="checkbox">
    <input id="c1" type="checkbox"/>篮球</br>
    <input id="c2" type="checkbox"/>足球</br>
    <input id="c3" type="checkbox"/>排球
</div>
</body>
</html>

js部分代码：

/**
 * Created by LY on 2016/11/28.
 */
window.onload= func

最低0.47元/天解锁文章

200万优质内容无限畅学