表单全选和取消全选

最新推荐文章于 2023-04-14 11:13:26 发布

vcdd

最新推荐文章于 2023-04-14 11:13:26 发布

阅读量91

点赞数 4

本文链接：https://blog.csdn.net/weixin_44247157/article/details/123154830

版权

HTML JavaScript 事件处理表单交互隐藏文本

关键词由CSDN通过智能技术生成

<!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>
        table {
            margin: 0 auto;
            margin-top: 20%;
            width: 200px;
            height: 150px;
            border-collapse: collapse;

        }

        thead {
            background-color: #007acc;
        }
    </style>
</head>

<body>

    <!-- 表单全选和取消全选 -->
    <table border="1px">
        <thead>
            <tr>
                <td><input type="checkbox" id="t-td"></td>
                <td>商品</td>
                <td>价格</td>
            </tr>
        </thead>
        <tbody id="t-ty">
            <tr>
                <td><input type="checkbox"></td>
                <td>键盘</td>
                <td>200</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>鼠标</td>
                <td>200</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>显示器</td>
                <td>2000</td>
            </tr>
        </tbody>

    </table>
    <script>
        var ttd = document.getElementById('t-td');
        var tty = document.getElementById('t-ty').getElementsByTagName('input');

        ttd.onclick = function () {
            // console.log(this.checked);
            if (this.checked) {
                for (var i = 0; i < tty.length; i++) {
                    tty[i].checked = this.checked;
                }
            } else {
                for (var i = 0; i < tty.length; i++) {
                    tty[i].checked = this.checked;
                }
            }
        }

        for (var i = 0; i < tty.length; i++) {
            tty[i].onclick = function () {
                var k = true;
                for (var i = 0; i < tty.length; i++) {
                    if (!tty[i].checked) {
                        k = false;
                    }
                }
                ttd.checked = k;
            }
        }

    </script>
</body>

</html>

2.显示隐藏文本内容

<!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>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        var ipt = document.querySelector('input');
        ipt.onfocus = function () {
            console.log('de');
            if (ipt.value === '手机') {
                this.value = '';
                this.style.color = '#000';
            }
        }
        ipt.onblur = function () {
            console.log('shi');
            if (this.value === '') {
                ipt.value = '手机';
                this.style.color = '#999';
            }
        }
    </script>
</body>

</html>