表单中单选、多选、选择框值的获取及表单的序列化

总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化，写成了一个对象。如下：

 1 　　var formUtil = { 2     // 获取单选按钮的值，如有没有选的话返回null 3     // elements为radio类的集合的引用 4     getRadioValue:function(elements) { 5       var value = null; // null表示没有选中项 6       // 非IE浏览器 7       if(elements.value != undefined && elements.value != '') { 8         value = elements.value; 9       } else { 10         // IE浏览器 11         for(var i = 0, len = elements.length; i < len; i++ ) { 12           if(elements[i].checked) { 13             value = elements[i].value; 14             break; 15           } 16         } 17       } 18       return value; 19     }, 20      21     // 获取多选按钮的值，如有没有选的话返回null 22     // elements为checkbox类型的input集合的引用 23     getCheckboxValue:function(elements) { 24       var arr = new Array(); 25       for(var i = 0, len = elements.length; i < len; i++ ) { 26         if(elements[i].checked) { 27           arr.push(elements[i].value); 28         } 29       } 30       if(arr.length > 0) { 31         return arr.join(','); 32       } else { 33         return null; // null表示没有选中项 34       }   35     }, 36      37     // 获取下拉框的值 38     // element为select元素的引用 39     getSelectValue:function(element) { 40       if(element.selectedIndex == -1) { 41         return null; // 没有选中的项时返回null 42       }; 43       if(element.multiple) { 44         // 多项选择 45         var arr = new Array(), options = element.options; 46         for(var i = 0, len = options.length; i < len; i++) { 47           if(options[i].selected) { 48             arr.push(options[i].value); 49           } 50         } 51         return arr.join(","); 52       }else{ 53         // 单项选择 54         return element.options[element.selectedIndex].value; 55       } 56     }, 57      58     // 序列化 59     // form为form元素的引用 60     serialize:function(form) { 61       var arr = new Array(), 62       elements = form.elements, 63       checkboxName = null; 64       for(var i = 0, len = elements.length; i < len; i++ ) { 65         field = elements[i]; 66         // 不发送禁用的表单字段 67         if(field.disabled) { 68           continue; 69         } 70         switch (field.type) { 71           // 选择框的处理 72           case "select-one": 73           case "select-multiple": 74             arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field))); 75             break; 76            77           // 不发送下列类型的表单字段   78           case undefined : 79           case "button" : 80           case "submit" : 81           case "reset" : 82           case "file" : 83             break; 84            85           // 单选、多选和其他类型的表单处理    86           case "checkbox" : 87             if(checkboxName == null) { 88               checkboxName = field.name; 89               arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName]))); 90             } 91             break; 92           case "radio" : 93             if(!field.checked) { 94               break; 95             } 96           default: 97             if(field.name.length > 0) { 98               arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); 99             } 100         }101       }102       return arr.join("&");103     } 104   };

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：表单中单选、多选、选择框值的获取及表单的序列化

关键词：序列