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