input中单选框，多选框和下拉列表获取选中的值

最新推荐文章于 2020-05-18 14:25:15 发布

半栈学徒

最新推荐文章于 2020-05-18 14:25:15 发布

阅读量1.9k

点赞数 3

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/zwj13603571674/article/details/103826490

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

先来说单选框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function show() {
            //获取name为people的元素对象
            var people = document.getElementsByName("people");
            //依次遍历，如果哪个的属性是checked，就显示
            for (var i = 0; i < people.length; i++) {
                if (people[i].checked) {
                   alert(people[i].value)
                }
            }
        }
    </script>
</head>
<form action="#">
<input type="radio" name="people" value="女">女
<input type="radio" name="people" value="男">男<br/>
<button onclick="show()">点击</button>
</form>
</body>

再来说多选框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function show() {
            //获取type='checkbox'的input元素对象
            var p = document.querySelectorAll("input[type='checkbox']");
            //依次遍历，如果哪个的属性是checked，就显示
            for (var i = 0; i < p.length; i++) {
                if (p[i].checked) {
                    alert(p[i].value)
                }
            }
        }
    </script>
</head>
<form action="#">
    <input  type="checkbox" value="苹果">苹果
    <input type="checkbox" value="橘子">橘子
    <input type="checkbox" value="栗子">栗子
    <input type="checkbox" value="香蕉">香蕉
    <button onclick="show()">点击</button>
</form>
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function show() {
            //获取标签名是option的元素对象
            var p = document.getElementsByTagName("option");
            //依次遍历，如果哪个的属性是selected，就显示
            for (var i = 0; i < p.length; i++) {
                if (p[i].selected) {
                    alert(p[i].value)
                }
            }
        }
    </script>
</head>
<form action="#">
    <select>
        <option>中国</option>
        <option>美国</option>
        <option>法国</option>
        <option>德国</option>
    </select>
    <button onclick="show()">点击</button>
</form>
</body>

半栈学徒

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
input中单选框，多选框和下拉列表获取选中的值

先来说单选框<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function show() { //获取name为people的元素对象 ...
复制链接

扫一扫

专栏目录