jquery遍历input中的数据

遍历 input 中的数据

依赖 JQuery 库，可以批量获取某个 DOM 节点下的数据信息

<!-- DOM 结构如下的获取 -->
<div class="test-input">
    <input type="text" name="test" value="" /><br />
    <input type="text" name="age" value="24" /><br />
    <input type="text" name="name" value="张三" /><br />
    <input type="radio" name="hobby" value="测试 1" checked> 测试 1 <br />
    <input type="radio" name="hobby" value="测试 2"> 测试 2 <br />

    <input type="checkbox" name="like" value="1111" checked> 1111<br />
    <input type="checkbox" name="like" value="2222"> 2222<br />
    <input type="checkbox" name="like" value="3333"> 3333<br />
    <input type="checkbox" name="like" value="4444"> 4444<br />

    <div name="message"> 测试的数据，看一下能否可以使用 </div><br />
</div>
<!-- 引入下面的 js 代码, 此处省略引入 (必须先引入 JQuery 文件) -->
<script>
    // 使用示例如下：input2Obj({el: ['input', 'div'],
        key: 'name',
        val: 'value',
    }, '.test-input')
</script>

/**
     * <h3> 将 input 值转为对象 </h3> 
     * <p> 可以针对某一块区域内的 input 和 div 进行取值 </p>
     *
     * @param {Object} options {el: 遍历的节点, key：获取的值的 prop 属性, val: 值对应的 dom 属性, isNull: 为空时是否挂载到对象上面去}
     *  @param {String} prefix 获取某块区域的 input 
     */
function input2Obj(opt, prefix = document) {// var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document; // 兼容低版本浏览器写法

    var defualtOptions = {
        key: 'name',
        val: 'value',
        el: 'input',
        isNull: true
    };
    var options = Object.assign(defualtOptions, opt);
    var obj = {};

    if (typeof options.el === 'string') {setObjVal(prefix, options.el);
    } else {for (var i = 0, len = options.el.length; i < len; i++) {setObjVal(prefix, options.el[i]);
        }
    }

    // 设置值到 Object 对象上
    function setObjVal(prefix, el) {$(prefix).find(el).each(function (index, item) {var $item = $(item);
            var key = $item.attr(options.key);
            var tagName = item.tagName || item.nodeName || '';
            var val = '';

            if (tagName.toUpperCase() === 'INPUT' && options.val === 'value') {val = $.trim($item.val()); // 如果是 input 输入框，必须获取的是 value 中的数据信息
            } else {val = $.trim($item.val()) || $.trim($item.attr(options.val)) || $.trim($item.text());
            }
            if (el === 'input') {switch ($item.attr('type')) {
                    case 'radio':
                        if (options.isNull) {if ($item.prop('checked')) {obj[key] = val;
                            }
                        } else {if ($item.prop('checked') && val) {obj[key] = val;
                            }
                        }
                        break;
                    case 'checkbox':
                        if ($item.prop('checked')) {
                            // 判断是否有参数
                            if (obj[key] && Array.isArray(obj[key])) { // 有参数
                                // 解构出来
                                // obj[key] = obj[key].concat(); // 此写法可以兼容 [...[1,2,3,4]];
                                obj[key].push(val);
                            } else {obj[key] = [val];
                            }
                        }
                        if (options.isNull) { // 能够为空时
                            if(!obj[key]) {obj[key] = [];}
                        }
                        break;
                    case 'file': // ignore
                    case 'button':
                    case 'reset':
                    case 'submit':
                    case 'image':
                        // ignore
                        break;
                    default:
                        setVal($item, val, key);
                        break;
                }
            } else {setVal($item, val, key);
            }
        });
    }

    // 设置值
    function setVal($item, val, key) {if (options.isNull) {obj[key] = val;
        } else {if (val) {obj[key] = val;
            }
        }
    }
    return obj;
}