js案例-全选checkbox复选框

最新推荐文章于 2024-09-23 15:38:48 发布

joker.ma

最新推荐文章于 2024-09-23 15:38:48 发布

阅读量1k

点赞数

分类专栏：案例文章标签： JavaScript checkbox 全选

本文链接：https://blog.csdn.net/qq_45092792/article/details/90648259

版权

本文介绍了如何使用JavaScript实现全选和反选复选框的功能。通过获取所有input元素，遍历并绑定点击事件，根据点击的元素判断是否为全选按钮。如果是全选，更新所有其他checkbox的状态；若非全选，只更新该元素的选中状态，并判断是否需要触发全选操作。

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

1\获取所有input,并且转换成一个数组
2\遍历这个数组,点击每个input执行函数
3\查找当前被点击的元素是第几个,第0个是全选,其他是剩余所有input
4\将除了全选以外的所有checkbox是否的选中的布尔值存储在arr数组中
5\点击每个除了全选外的元素后,将这个元素是否选中存储在arr数组的对应位置
6\点击的是全选时,遍历input数组所有的内容,让其他元素的选中项和全选相同
7\将每次点击非全选按钮时判断当前是否需要全选或者取消全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title
</head>
<body>
    <input type="checkbox" name="hobby" id="allCheck"><label for="allCheck">全选</label><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name="hobby"><br>
    <input type="checkbox" name=&#

最低0.47元/天解锁文章