JavaScript根据name获取值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div { margin-top: 10px; }
    </style>
</head>
<body>

    <div>
        <label for="ipt-txt">文本输入： </label> <input type="text" id="ipt-txt" name="ipt-txt-name" />
    </div>

    <div>
        <label for="ipt-password">密码输入： </label> <input type="password" id="ipt-password" name="ipt-password-name" />
    </div>

    <div>
        <label for="ipt-hidden">隐藏域：（value="Hidden Input"） </label> <input type="hidden" id="ipt-hidden" name="ipt-hidden-name" value="Hidden Input" />
    </div>

    <div>
        <label for="ipt-select">选择框： </label>
        <select id="ipt-select" name="ipt-select-name">
            <option value="Option1">选择1（value="Option1"）</option>
            <option value="Option2">选择2（value="Option2"）</option>
        </select>
    </div>

    <div>
        <label>多项选择：</label>
        <input type="checkbox" id="ipt-checkbox-1" name="ipt-checkbox-name" value="Checkbox 1" /><label for="ipt-checkbox-1">多选1（value="Checkbox 1"）</label>
        <input type="checkbox" id="ipt-checkbox-2" name="ipt-checkbox-name" value="Checkbox 2" /><label for="ipt-checkbox-2">多选2（value="Checkbox 2"）</label>
    </div>

    <div>
        <label>单项选择：</label>
        <input type="radio" id="ipt-radio-1" name="ipt-radio-name" value="Radio 1" /><label for="ipt-radio-1">单选1（value="Radio 1"）</label>
        <input type="radio" id="ipt-radio-2" name="ipt-radio-name" value="Radio 2" /><label for="ipt-radio-2">单选2（value="Radio 2"）</label>
    </div>

    <div>
        <button id="btn-txt">获取 text 值</button>
        <button id="btn-password">获取 password 值</button>
        <button id="btn-hidden">获取 hidden 值</button>
        <button id="btn-select">获取 select 值</button>
        <button id="btn-checkbox">获取 checkbox 值</button>
        <button id="btn-radio">获取 radio 值</button>
    </div>

    <script type="text/javascript">

        var EventUtils = {
            addEvent: function (element, type, handler) {
                if(element.addEventListener) {
                    element.addEventListener(type, handler, false);javascript数组对象
                } else if(element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            }
        };

        // 遍历 NodeList 中元素的值，通过索引获取具体的元素对象
        var eachDomValues = function (lists) {
            var values = "";
            for(var i = 0; i < lists.length; i++) {
                values += lists[i].value + "\r\n";
            }

            return values;
        };

        // 根据 ID 获取元素（唯一元素）
        var domById = function (domId) {
            return document.getElementById(domId);
        };

        // 根据属性 name 获取（不直接返回元素，返回的是 NodeList）
        var domsByName = function (domName) {
            return document.getElementsByName(domName);
        };

        // 输入文本
        EventUtils.addEvent(domById("btn-txt"), "click", function (e) {
            alert(eachDomValues(domsByName("ipt-txt-name")));
        });

        // 输入密码
        EventUtils.addEvent(domById("btn-password"), "click", function (e) {
            alert(eachDomValues(domsByName("ipt-password-name")));
        });

        // hidden 隐藏域
        EventUtils.addEvent(domById("btn-hidden"), "click", function (e) {
            alert(eachDomValues(domsByName("ipt-hidden-name")));
        });

        // select 下拉选择框获取 name 的值为当前选中项的值
        EventUtils.addEvent(domById("btn-select"), "click", function (e) {
            alert(eachDomValues(domsByName("ipt-select-name")));
        });

        // checkbox 多选根据 checked 属性判断是否选中
        EventUtils.addEvent(domById("btn-checkbox"), "click", function (e) {
            var checkboxDoms = domsByName("ipt-checkbox-name");
            var checkedValue = "";
            // 无论有没有选中，都列出值
            alert("全部选项：\r\n" + eachDomValues(checkboxDoms));


            // 列出选中项的值
            for(var i = 0; i < checkboxDoms.length; i++) {
                if(checkboxDoms[i].checked) {
                    checkedValue += checkboxDoms[i].value + " # ";
                }
            }
            alert("选中值：\r\n" + checkedValue);
        });

        // radio 单选根据 checked 属性判断是否选中
        EventUtils.addEvent(domById("btn-radio"), "click", function (e) {
            var radioDoms = domsByName("ipt-radio-name");
            var checkedValue = "";
            alert("全部选项：\r\n" + eachDomValues( radioDoms ));


            // 列出选中项的值
            for(var i = 0; i < radioDoms.length; i++) {
                if(radioDoms[i].checked) {
                    checkedValue += radioDoms[i].value + " # ";
                }
            }
            alert("选中值：\r\n" + checkedValue);
        });
    </script>
</body>
</html>
需要注意的是 getElementsByName 返回的是包含属性 name 为指定值元素的 NodeList 对象，而不是元素对象。如果要对 getElementsByName 取得的对应 name的元素操作，必须像数组取值一样通过索引取某个元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。