吐槽牛客 JS29 全选问题-CSDN博客

本文链接：https://blog.csdn.net/qq_45856669/article/details/122458912

前言

刷了这么久的题，从未发现这么狗的题，气死的一匹。。。。

一、题目

简单全选问题
在这里插入图片描述

二、槽点

1.不让我用let

全篇使用let，提交不对，看了讨论区发现有人说let改成var过了，好，我改，改完还不对，所以为什么不让用let？？？？

2.我的item怎么了？？？

改完var后的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<style>
    ul {
        list-style: none;
    }
</style>

<body>
    <ul>
        <li>全选<input type='checkbox' id='all'></li>
        <li>Java<input type='checkbox' class='item'></li>
        <li>javaScript<input type='checkbox' class='item'></li>
        <li>C++<input type='checkbox' class='item'></li>
        <li>python<input type='checkbox' class='item'></li>
        <li>.net<input type='checkbox' class='item'></li>
    </ul>

    <script>
        // 补全代码
        var all = document.getElementById('all')
        var item = document.getElementsByClassName('item')
        function selectAll() {
            for (var i = 0; i < item.length; i++) {
                item
[i].checked = true;
                count = item.length;
            }
        }
        function selectNone() {
            for (var i = 0; i < item.length; i++) {
                item
[i].checked = false;
                count = 0;
            }
        }
        all.onchange = function () {
            if (all.checked == true) selectAll();
            else selectNone()
        }
        var count = 0;
        for (var i = 0; i < item.length; i++) {
            item
[i].onchange = function () {
                console.log(this.checked)
                if (this.checked == true) count++;
                else count--;
                if (count == item.length) all.checked = true;
                else all.checked = false;
            }
        }

    </script>
</body>

</html>

真真真逻辑是对的，我无从下手去改了已经，到处找哪里可以询问，还留了讨论。（此时已经想骂人了）然后从样例开始，错误提示是这样的：
在这里插入图片描述
好，去测试样例输入函数，在一顿操作后，为了过样例那个函数：

function md() {
            all.checked = true;
            all.onchange();
            var result = item.every(x => x.checked);
            return result;
        }

先是改了在这里插入图片描述
然后返回结果对了：

去提交，完了，不对，和之前一样，我…然后发现了命名不一样，于是吧item改成了options，居然过了，合着我命名不对，名字就一定要用输入样例的options呗，那你整个题目哪里有这个词？？？？？
行了，上一遍正确代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<style>
    ul {
        list-style: none;
    }
</style>

<body>
    <ul>
        <li>全选<input type='checkbox' id='all'></li>
        <li>Java<input type='checkbox' class='item'></li>
        <li>javaScript<input type='checkbox' class='item'></li>
        <li>C++<input type='checkbox' class='item'></li>
        <li>python<input type='checkbox' class='item'></li>
        <li>.net<input type='checkbox' class='item'></li>
    </ul>

    <script>
        // 补全代码
        var all = document.getElementById('all')
        var options = Array.from(document.getElementsByClassName('item'))
        
        function selectAll() {
            for (var i = 0; i < options.length; i++) {
                options[i].checked = true;
                count = options.length;
            }
        }
        function selectNone() {
            for (var i = 0; i < options.length; i++) {
                options[i].checked = false;
                count = 0;
            }
        }
        all.onchange = function () {
            if (all.checked == true) selectAll();
            else selectNone()
        }
        var count = 0;
        for (var i = 0; i < options.length; i++) {
            options[i].onchange = function () {
                console.log(this.checked)
                if (this.checked == true) count++;
                else count--;
                if (count == options.length) all.checked = true;
                else all.checked = false;
            }
        }
       function mm() {all.checked = true; all.onchange();var result = options.every(x => x.checked) ;  return result; }

    </script>
</body>

</html>