linneOhara 2021-05-18 07:14 采纳率: 100%
浏览 64
已采纳

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

第一种代码(能执行的)

<!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 08:43
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 盘古气象大模型调用(python)
  • ¥15 传人记程序做的plc 485从机程序该如何写
  • ¥15 已知手指抓握过程中掌指关节、手指各关节和指尖每一帧的坐标,用贝塞尔曲线可以拟合手指抓握的运动轨迹吗?
  • ¥50 libwebsockets 如何添加其他socket事件回调
  • ¥50 实现画布拖拽算子排布,通过flink实现算子编排计算,请提供思路
  • ¥15 esium自定义材质拉伸问题
  • ¥15 cmake+mingw使用<mysqlx/xdevapi.h>报错
  • ¥15 eNSP中防火墙的使用
  • ¥15 关于#mlnet#的问题:mlnet相关请求(语言-c#)
  • ¥15 lvgl7.11怎么做出文字被选中的效果
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部