JavaScript表单元素的属性操作_js表单的属性-CSDN博客

本文链接：https://blog.csdn.net/qq_41927206/article/details/89057557

disabled、selected、checked

当HTML中的标签的属性，只有一个值的时候，DOM中对应的元素的属性值是布尔类型

即使对input标签设置了disabled属性，仍然可以用value属性来改变文本框的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" value="按钮">
    <input type="button" value="设置文本">
    <input type="text" name="" id="txt" value="123">

    <script>
        var btns = document.querySelectorAll('input[type=button]');
       
        btns[0].onclick = function() {
            txt.disabled = true;
            console.log(txt.disabled);
        }
        btns[1].onclick = function () {
            txt.value = "hhhhh";
        }
    </script>
</body>
</html>

案例：给文本框赋值

如果有大量的字符串进行拼接的时候应该避免有+号来进行拼接。
可以采用数组的方法来进行拼接，每遇到一个字符串的时候进行push方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

    <input type="button" value = "打印">

    <script>
        var ipts = document.getElementsByTagName("input");
        console.log(ipts[0].type);
        
        // 给文本框赋值
        for (var i = 0; i < ipts.length; i++) {
            if (ipts[i].type == "text") {
               ipts[i].value = i;            
            }
        }
        // 输出文本框的value值，以|分割
        var btn = ipts[ipts.length - 1];
        btn.onclick = function(){
            var arr = [];
            for (var i = 0;i < ipts.length; i++) {
                if (ipts[i].type == 'text') {
                    arr.push(ipts[i].value);
                }
            }
            console.log(arr.join('|'));
            
        }
    </script>
</body>
</html>

案例：随机设置下拉框中的选中项

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="选择">
    <select name="" id="select">
        <option value="">01</option>
        <option value="">02</option>
        <option value="">03</option>
        <option value="">04</option>
        <option value="">05</option>
    </select>

    <script>
        var btn = document.getElementsByTagName("input")[0]; // 获取按钮
        var select = document.getElementById("select"); // 获取下拉列表

        btn.onclick = function () {
            var opts = select.children; // 获取到所有的option
            var randomIndex = Math.floor(Math.random() * opts.length);

            opts[randomIndex].selected = true;
        }
    </script>
</body>

</html>

案例：搜索文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索文本框</title>
</head>
<body>
    <input type="text" name="" id="txt" placeholder="请输入搜索的内容">

    <script>
        var txt= document.getElementById("txt");
        txt.onfocus = function() {
            this.placeholder = '';
        }
        txt.onblur = function() {
            if (txt.value.length === 0) {
                this.placeholder = '请输入搜索内容';
            }
        }
    </script>
</body>
</html>

全选反选案例

样例图片
在这里插入图片描述
js代码

        var parent = document.getElementById("parent"); // 获取标题栏的复选框
        var tbody = table.tBodies[0];
        var children = tbody.getElementsByTagName("input"); // 获取所有商品列表的复选框
        var btn = document.getElementsByTagName("button")[0]; // 获取反选
        // 设置标题的复选框
        parent.onclick = function () {
            for (var i = 0; i < children.length; i++) {
                if (children[i].type !== 'checkbox') {
                    continue;
                }
                // 为每个商品列表的复选框赋值
                children[i].checked = this.checked;
            }
        }

        // 设置每个商品列表的复选框
        for (var i = 0; i < children.length; i++) {

            if (children[i].type !== 'checkbox') {
                continue;
            }

            children[i].onclick = function () {
                isAllChecked();
            }
        }

        btn.onclick = function () {

            for (var i = 0; i < children.length; i++) {
                children[i].checked = !children[i].checked;
            }

            isAllChecked();
        }

        function isAllChecked() {
            // 假设已经全部选中
            var flag = true;
            // 检查是否全部选中了
            for (var i = 0; i < children.length; i++) {
                if (children[i].type !== 'checkbox') {
                    continue;
                }
                // 判断每个商品列表是否已经被选中
                if (!children[i].checked) {
                    flag = false;
                }
            }

            // 为标题的复选框设置选中还是未选中
            parent.checked = flag;
        }