【JavaScript】表单 select 对象和 checkbox 复选框

最新推荐文章于 2024-10-10 21:56:27 发布

原创最新推荐文章于 2024-10-10 21:56:27 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了JavaScript中如何操作select对象和checkbox复选框。详细讲解了select对象的属性和option对象的方法，包括如何添加、删除、获取和修改option。同时提供了只允许单选、多选的下拉列表实例，以及复选框全选、全不选、反选的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　脚本编程最复杂的表单控件是 select 元素对象。select 对象其实是一个包含 option 对象数组的复合对象。此外，可在 HTML 中建立这个对象，把它显示为下拉列表或者滚动列表，滚动列表可以配置为允许进行多选。

　　有些属性可用于整个 select 对象，其他属性则仅用于 select 对象中的单个选项。如果想要确定用户选择了哪一项，且编码处理最广泛的浏览器，就必须使用 select 和 option 对象的属性。

select 对象

select 对象最重要的属性是 selectedIndex，即当前被选中的框中的文本的索引值

用法为：formObject.selectName.selectedIndex

option 对象

创建一个 option 对象，即在 <select> 标签中创建一个或多个文本

var e = document.getElementById("selectId");
e.options = new Option("文本", "值");

options 是个数组，里面可以存放多个 <option value="值">文本</option> 这样的标签

option 对象的方法

增加一个 <option> 标签： obj.options.add(new Option("文本", "值"))

删除一个 <option> 标签： obj.options.remove(obj.selectedIndex)

获得一个 <option> 标签的文本： obj.options[obj.selectedIndex].text

获得一个 <option> 标签的值： obj.options[obj.selectedIndex].value

修改一个 <option> 标签的值： obj.options[obj.selectedIndex] = new Option("新文本", "新值")

删除所有 <option> 标签： obj.options.length = 0

注意：obj.option 中的 option 不需要大写， new Option 中的 Option 需要大写

实例：只允许单选的下拉列表

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Document</title>
        <script type="text/javascript">
            var provinces = new Array();
            provinces["湖北"] = ["武汉","襄阳","随州","宜昌","十堰"];
            provinces["四川"] = ["成都","内江","达州"];
            provinces["河南"] =["郑州","南阳","信阳","漯河"];

            function changeProvince() {
                var prov = document.getElementById("province").value;
                var city = document.getElementById("city");
                city.options.length = 0;
                for(var i in provinces[prov]) {
                    city.options.add(new Option(provinces[prov][i], provinces[prov][i]));
                }
            }

            window.onload = function() {
                var province = document.getElementById("province");
                for(var index in provinces) {
                    province.options.add(new Option(index, index));
                }
                province.fireEvent("onchange");
            };
    </script>
</head>
<body>
    省份:<select id="province" onchange= "changeProvince()"></select>
    城市:<select id="city"></select>     
</body>
</html>

实例：允许多选的下拉列表

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Document</title>
        <script type="text/javascript">
            function selected() {
            var select = document.getElementById("select");
            var str = [];
            for(var i=0; i<select.length; i++) {
                if(select.options[i].selected) {
                    str.push(select[i].value);
                }
            }
            console.log(str);
        }
    </script>
</head>
<body>
    <select name="" id="select" multiple>
        <option value="武汉">武汉</option>
        <option value="襄阳">襄阳</option>
        <option value="随州">随州</option>
        <option value="宜昌">宜昌</option>
        <option value="十堰">十堰</option>
    </select>
    <button onclick="selected()">确定</button>
</body>
</html>

实例：复选框checkbox 全选、全不选、反选

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
                var btns = document.getElementsByTagName("button");  // 获取所有的按钮
                var inputs = document.getElementsByTagName("input");   // 获取所有的选项input

                // 全选或者不选的时候 调用此函数
                function fun(flag){
                    for (var i=0; i<inputs.length;i++) {
                        inputs[i].checked = flag;
                    }
                }

                //获取第一个按钮 “全选”
                btns[0].onclick = function(){
                    fun(true);
                }

                // 获取第二个按钮 "不选"
                btns[1].onclick = function(){
                    fun(false);
                }

                // 获取第三个按钮 “反选”
                btns[2].onclick = function(){
                    for (var i=0;i<inputs.length;i++) {
                        inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
                    }
                }

                // 输出选中的复选框的值
                btns[3].onclick = function(){
                    var oCheckbox = document.getElementsByName("checkbox1");
                    var arr = [];
                    var index = 0;
                    for( var i=0; i<oCheckbox.length; i++){
                        if(oCheckbox[i].checked){
                            arr[index++] = oCheckbox[i].value;
                        }
                    }
                    console.log(arr);
                }
            }
        </script>
    </head>
    <body>
        <div id="box1">
            <button>全选</button>
            <button>不选</button>
            <button>反选</button>
            <button>输出</button>
        </div>
        <div id="box2">
            <input type="checkbox" name="checkbox1" value="1" checked/>1
            <input type="checkbox" name="checkbox1" value="2"/>2
            <input type="checkbox" name="checkbox1" value="3" checked/>3
            <input type="checkbox" name="checkbox1" value="4"/>4
            <input type="checkbox" name="checkbox1" value="5"/>5
        </div>
    </body>
</html>