用JavaScript封装一个函数,可以通过这个函数获取一组表单控件 radio che...

发布网友发布时间：2022-04-29 05:52

共2个回答

热心网友时间：2022-05-15 01:47

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <script type="text/javascript">
        /**
         * 公用方法
         */
        window.WebUtils = {
            formData : function(formId) {
                if (formId) {
                    var parameters = {};
                    var form = document.getElementById(formId);
                    if (form) {
                        // 获取所有input表单元素
                        var inputs = form.getElementsByTagName("input");
                        for (var idx = 0; idx < inputs.length; idx++) {
                            var element = inputs[idx];
                            // 默认全为空
                            parameters[element.name] = parameters[element.name] || null;
                            //根据类型设置值
                            var type = element.type.toLowerCase();
                            var name = element.name;
                            var value = element.value;
                            if (type == "submit" || type == "hidden" || type == "password" || type == "text") {
                                parameters[name] = value;
                            } else if (type == "checkbox") {
                                parameters[name] = parameters[name] || [];
                                if (element.checked) {
                                    parameters[name] = (parameters[name]).concat([value]);
                                }
                            } else if (type == "radio") {
                                if (element.checked) {
                                    parameters[name] = value;
                                }
                            }
                        }
                    }
                    return parameters;
                }
                return null;
            }
        };

        function getValues() {
            alert(JSON.stringify(WebUtils.formData("studentForm")));
        }
    </script>
    <body>
        <form id="studentForm" name="studentForm">
            姓名：
            <input name="name" type="text"/>
            <br/>
            性别：
            <input name="gender" type="radio" value="male"/>
            男
            <input name="gender" type="radio" value="female"/>
            女
            <br/>
            课程:
            <input type="checkbox" name="course" value="chinese">
            语文
            <input type="checkbox" name="course" value="english">
            英语
            <input type="checkbox" name="course" value="math">
            数学
            <br>
            <input type="hidden" name="class" value="C1G2">
            <br>
        </form>
        <button onclick="getValues();">
            取值
        </button>
    </body>
</html>

只处理了INPUT的，像textarea,label的，你可以同样的处理添加；

追问问一下 window.WebUtils是什么意思

追答自己定义的jascript插件，可用直接用function formData(formId){}这中方式；
就相当于定义一个全局的变量window.WebUtils={};然后变量有一个属性叫formData，它的值是一个函数：function(formId),访问这个函数的时候我们就可以以对象的方式访问 WebUtils.formData(formId)或WebUtils["fomData"](formId)

热心网友时间：2022-05-15 03:05

radio或checkbox设置一组相同的name值
用
$("input:checkbox[name='fruit']:checked").each(function() {
$(this).val());
});
进行遍历