hikigayaha
2021-05-18 15:14
采纳率: 100%
浏览 63
已采纳

(小白一个,请教一下大佬们)两种方法做的表单全选按钮为什么一个能执行,一个点击主选框有相反的结果

第一种代码(能执行的)

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td {
            border: 1px solid;
        }

        .choose,
        .chooser {
            width: 30px;
        }

        #productInformation {
            height: 40px;
            text-align: center;
            font-size: 18px;
            background-color: skyblue;
        }

        #product {
            background-color: beige;
        }
    </style>
</head>

<body>
    <table align="center" id="product">
        <tr id="productInformation">
            <td class="choose">
                <label id='mainChooser'>
                    <input type="checkbox" class="button">
                </label>
            </td>
            <td>商品</td>
            <td>价钱</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>apple</td>
            <td>X1</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>banana</td>
            <td>X2</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>watermelon</td>
            <td>X3</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>grape</td>
            <td>X4</td>
        </tr>
        <script>
            var chooses = document.getElementsByClassName('chooser');
            var mainChoose = document.getElementById('mainChooser');
            var button=document.getElementsByClassName('button')

            mainChoose.onclick = function () {
                if (button[0].checked==true) {
                    for (let index = 0; index < chooses.length; index++) {
                        chooses[index].checked = true;
                    }

                } else if (button[0].checked==false) {
                    for (let index = 0; index < chooses.length; index++) {
                        chooses[index].checked = false;
                    }
                }               
            }


        </script>
    </table>
</body>

</html>

而第二种代码会有这样的问题(红圈里面应该是对勾)实际测试的时候点击全选框会出现相反的结果

这是第二种代码(有问题的)

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td {
            border: 1px solid;
        }

        .choose,
        .chooser {
            width: 30px;
        }

        #productInformation {
            height: 40px;
            text-align: center;
            font-size: 18px;
            background-color: skyblue;
        }

        #product {
            background-color: beige;
        }
    </style>
</head>

<body>
    <table align="center" id="product">
        <tr id="productInformation">
            <td class="choose">
                <label id='mainchooser'>
                    <input type="checkbox">
                </label>
            </td>
            <td>商品</td>
            <td>价钱</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>apple</td>
            <td>X1</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>banana</td>
            <td>X2</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>watermelon</td>
            <td>X3</td>
        </tr>
        <tr>
            <td class="choose">
                <label >
                    <input type="checkbox" class="chooser">
                </label>
            </td>
            <td>grape</td>
            <td>X4</td>
        </tr>
        <script>
            var chooses = document.getElementsByClassName('chooser');
            var mainchoose = document.getElementById('mainchooser');
            var k = 'appear';
            mainchoose.onclick = function () {
                console.log(k);//为什么有时会输出两个值?
                if (k=='appear') {
                    for (let index = 0; index < chooses.length; index++) {
                        chooses[index].checked = true;
                    }
                    k='disappear'
                } else if (k='disappear') {
                    for (let index = 0; index < chooses.length; index++) {
                        chooses[index].checked = false;
                    }
                    k='appear'
                }                
            }
        </script>
    </table>
</body>

</html>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 少十步 2021-05-18 16:43
    已采纳

    2次点击过快的话有的浏览器就会出现这种情况,就相当于双击,触发了双击事件,有的浏览器可能会区分单击和双击。双击的话,和单击处理方式一样,第二次并不会改变已有的状态

    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • 崽崽的谷雨 2021-05-18 15:36

    第二个有什么错误,我试了一下可以啊?

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题