JS中的全选练习（包含思路）

最新推荐文章于 2022-05-16 15:19:06 发布

Fantasc

最新推荐文章于 2022-05-16 15:19:06 发布

阅读量294

点赞数

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119374960

版权

本文介绍了JavaScript中实现多选框全选、全不选、反选和提交功能的练习，详细分析了各个功能的实现逻辑。全选通过设置所有items元素的checked属性为true，全不选则设置为false，反选则是取反当前状态。提交按钮用于输出checked为true的元素。同时讨论了全选/全不选按钮的状态跟随功能，即当所有多选框选中时，按钮被选中，否则不选中，并且按钮状态会根据全选和全不选操作实时更新。

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

以下时多选框的全选、全不选、反选和提交的练习，注意看注释，将思路理清楚

全选按钮功能分析：

获取元素并为其绑定单击响应函数，在单击事件中获取name为items的元素，对其进行遍历，将遍历得到的所有元素的checked属性设置为true，即将其设置为被选中状态。
全不选按钮功能分析：

原理同全选按钮，不同的是最后将遍历得到的元素的checked属性设置为false即可。
反选按钮功能分析：

获取反选按钮元素，为其绑定单击响应函数，在事件中遍历得到name为items的元素，对遍历得到元素的checked属性进行判断，如果是true就将其设置为false，如果是false则将其设置为true。（更简便的方法就是：将其checked属性设置取反就行）
提交按钮功能分析：

获取提交按钮，为其绑定单击响应函数，在单击事件中获取name为items的元素，对其进行遍历，将其checked属性为true的元素输出即可。
全选/全不选按钮功能分析：

获取全选/全不选按钮，为其绑定单击响应函数，在响应函数中获取name为items的元素，对其进行遍历，将遍历得到的name为items的元素的checked属性，设置成与全选/全不选按钮的checked属性相同的值即可。
- 处理全选/全不选按钮的功能，使其在多选框全部被选中的情况下，自身被勾上，多选框有一个或多个没有被选中的情况下，全选/全不选按钮自身不被勾上。
- 全选/全不选按钮随着全选按钮或者全不选按钮功能变化而变化（如果全选按钮触发，它自身也被选中，如果全不选按钮被触发，它自身也不被选中）。
- 全选/全不选按钮随反选按钮的功能的变化而变化（重点理清思路）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/checkbox.css">

    <script type="text/javascript">

        // function myClick(btn,fun){
   
        //     var btn = document.getElementById("btn");
        //     btn.onclick = fun;
        // }
    
        window.onload = function(){
   
            //1.全选按钮的功能：点击按钮之后，所有的都被选中
            //为id为allCheckBtn绑定单击事件
            var allCheckBtn = document.getElementById("allCheckBtn");
            var allCheckBox = document.getElementById("allCheckBox");
            allCheckBtn.onclick = function(){
   
                //设置，让四个多相框变成选中状态
                //获取多选框
                var items = document.getElementsByName("items");
                //遍历items

最低0.47元/天解锁文章

Fantasc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中的全选练习（包含思路）

以下时多选框的全选、全不选、反选和提交的练习，注意看注释，将思路理清楚<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
复制链接

扫一扫