from 表单checkbox不选中是否会提交_dom表单操作

最新推荐文章于 2022-08-13 22:46:47 发布

勃加蕊

最新推荐文章于 2022-08-13 22:46:47 发布

阅读量658

点赞数

文章标签： from 表单checkbox不选中是否会提交

本文链接：https://blog.youkuaiyun.com/weixin_32093689/article/details/113629110

版权

DOM表单操作

1.value属性

value - 设置或返回表单字段的值。

<body>
    姓名：<input type="text" id="user-name">
    <button id="text-btn">设置文本输入框内容</button>
    <script>
        // 设置或获取文本框的value值
        var userName = document.getElementById("user-name");
        var textBtn = document.getElementById("text-btn");
        textBtn.onclick = function () {
            // 设置value值
            userName.value = "ande";
            // 获取value值
            console.log(userName.value);
        };
    </script>
</body>

2.checked属性

checked - 作用于表单中的checkbox和radio，用于设置或判断表单的当前状态。

<body>
    <input type="radio" class="sex" value="1">女
    <input type="radio" class="sex" value="2">男
    <button id="radio-btn">获取选中的性别</button>
    <script>
        // 获取单选框的value值
        var radio = document.getElementsByClassName("sex");
        // 1.设置“男”被选中
        for (var i = 0; i < radio.length; i++) {
            if(radio[i].value==="2") {
                // checked设置性别“男”被选中
                radio[i].checked = true;
            }
        }
        // 2.获取被选中的性别
        var sexBtn = document.getElementById("radio-btn");
        sexBtn.onclick = function () {
            for (var i = 0; i < radio.length; i++) {
                // checked判断是否处于选中状态
                if (radio[i].checked) {
                    console.log("选中的性别：" + radio[i].value);
                }
            }
        };
    </script>
</body>

3.selected属性

selected - 作用于表单中的select，用于设置或返回选项的selected属性的值。

<body>
    故乡：<select id="city">
        <option value="023">重庆</option>
        <option value="021" selected>北京</option>
        <option value="027">武汉</option>
        <option value="020">上海</option>
    </select>
    <button id="select-btn">获取选中的城市</button>

    <script>
        // 获取选中城市的value值
        var city = document.getElementById("city");
        // 1.设置“武汉”被选中
        for (var i = 0; i < city.children.length; i++) {
            if (city.children[i].value === "027") {
                // selected设置城市“武汉”被选中
                city.children[i].selected = true;
            }
        }
        // 2.获取被选中的城市
        var cityBtn = document.getElementById("select-btn");
        cityBtn.onclick = function () {
            for (var i = 0; i < city.children.length; i++) {
                // selected判断哪个城市被选中
                if (city.children[i].selected) {
                    console.log("选中的城市：" + city.children[i].value);
                }
            }
        }
    </script>
</body>

4.disabled属性

disabled 属性可设置或返回是否应禁用文本框。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。

<body>
    <input type="radio"> 男
    <input type="radio" id="sex"> 女
    <input type="radio"> 未知
    <script>
        var sex = document.getElementById("sex");
        // 设置性别“女”不能被选中
        sex.disabled = true;
        // 获取性别“女”的状态
        console.log(sex.disabled)
    </script>
</body>

注意：disabled属性也可以用于button标签。

5.表单事件操作

onsubmit() 作用于表单上面，当表单提交时触发。

onreset() 作用于表单上面，当表单重置时触发。

<body>
    <form action="http://www.baidu.com" id="form">
        <input type="text" name="username" placeholder="请输入用户名..."> <br>
        <input type="password" name="password" placeholder="请输入密码..."> <br>
    </form>
    <button id="submit">提交数据</button>
    <button id="reset">重置数据</button>
    <script>
        var form = document.getElementById("form");
        // 提交数据
        var submit = document.getElementById("submit");
        submit.onclick = function () {
              form.submit();
        };
        // 重置数据
        var reset = document.getElementById("reset");
        reset.onclick = function () {
            form.reset();
        };
    </script>
</body>