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;
}