表单输入名称中的动态变量名称

时间:2014-10-28 07:56:54

标签: javascript jquery

如何根据所有表单输入复选框列表名称创建动态变量名称?这就是我到目前为止所拥有的

var nameArray = [];
$.each($("#store-filter input").serializeArray(), function(i, field) {
    nameArray[field.name] = field.value;
});

alert(nameArray[0]);

for (i = 0; nameArray.length > i; i++)
{
     //alert(nameArray[i]);
     var nameArray[i] = nameArray[i].value;
     var nameArray[i]+'_checked_values' = $(\'input[name="nameArray[i]+[]"]:checked\').map(function() {
        return this.value;
    }).get();

}
alert(make); //variable name from name="make[]"

示例HTML

<form id="store-filter" action:"javascript:void(0);">
            <span id="store">
                <input id="store_0" value="2" name="store[]" type="checkbox">&nbsp;<label for="store_0">Store 1</label>
                <input id="store_1" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_1">Store 2</label>
                <input id="store_2" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_2">Store 3</label>
            </span>
            <span id="make">
                <input id="make_0" value="2" name="make[]" type="checkbox">&nbsp;<label for="make_0">make 
        1</label>
              <input id="make_1" value="3" name="make[]" type="checkbox">&nbsp;<label for="make_1">make 
        2</label> 
    <input id="make_2" value="4" name="make[]" type="checkbox">&nbsp;<label for="make_2">make 
        3</label>

             </span>
            <span id="time">
               <input id="time_0" value="2" name="time[]" type="checkbox">&nbsp;<label for="time_0">time 1</label>
              <input id="time_1" value="3" name="time[]" type="checkbox">&nbsp;<label for="time_1">time 2</label>
    <input id="time_2" value="4" name="time[]" type="checkbox">&nbsp;<label for="time_2">time 3</label>
            </span>
</form>

所以稍后在我的代码中我可以创建一个url字符串?make=1,2,3&store=40,5,6&time=1,2,3,4

$ _GET参数取自输入复选框名称动态

3 个答案:

答案 0 :(得分:1)

我建议使用以下方法,显然我只需点击按钮,就应该将其添加到您选择的事件/互动中:

&#13;
&#13;
function makeQueryString() {
  function keyValues(idPref) {
    // using the pass-in 'id' as a key:
    var key = idPref,
    // searching within the element identified with that 'id' for
    // other elements whose 'id' *starts* with that string:
      values = $('#' + idPref + ' input[id^="' + idPref + '"]').map(function() {
        // iterating over those found elements and, if the value is *not* the
        // defaultValue (value on page-load), *or* the checked state is not the
        // default state (checked/unchecked as on page-load):
        if (this.value !== this.defaultValue || this.checked !== this.defaultChecked) {
          // we return the value:
          return this.value;
        }
      // get() converts to a JavaScript Array, join() concatenates Array elements
      // to form a string:
      }).get().join(',');

    // if there is a key, and there are associated values, we return a 'key=value,value2'
    // string, otherwise we return an empty string:
    return key && values.length ? key + '=' + values : '';
  }

  // we return the value obtained after iterating over the form's span elements
  // that have an [id] attribute:
  return $('form span[id]').map(function(){
    // obtaining the 'key=value1,value2' strings from the called-function:
    return keyValues(this.id);
  // converting those returned elements into an Array, and joining with & characters:
  }).get().join('&');
}

$('#test').click(function(e) {
  e.preventDefault();
  console.log(makeQueryString());
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">test</button>
<form id="store-filter" action: "javascript:void(0);">
  <span id="store">
                <input id="store_0" value="2" name="store[]" type="checkbox">&nbsp;<label for="store_0">Store 1</label>
                <input id="store_1" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_1">Store 2</label>
                <input id="store_2" value="3" name="store[]" type="checkbox">&nbsp;<label for="store_2">Store 3</label>
            </span>
  <span id="make">
                <input id="make_0" value="2" name="make[]" type="checkbox">&nbsp;<label for="make_0">make 
        1</label>
              <input id="make_1" value="3" name="make[]" type="checkbox">&nbsp;<label for="make_1">make 
        2</label> 
    <input id="make_2" value="4" name="make[]" type="checkbox">&nbsp;<label for="make_2">make 
        3</label>

             </span>
  <span id="time">
               <input id="time_0" value="2" name="time[]" type="checkbox">&nbsp;<label for="time_0">time 1</label>
              <input id="time_1" value="3" name="time[]" type="checkbox">&nbsp;<label for="time_1">time 2</label>
    <input id="time_2" value="4" name="time[]" type="checkbox">&nbsp;<label for="time_2">time 3</label>
            </span>
</form>
&#13;
&#13;
&#13;

参考文献:

答案 1 :(得分:0)

你使用Javascript,你不需要声明数组的大小,通过添加/删除对象/数组中的任何内容没有问题。

你应该创建一个变量make然后获取值。最后,你将能够取回它。

var make;
$.each($("#store-filter input").serializeArray(), function(i, field) {
    make[i] = field.name;
});

稍后在您的代码中,您将使用数组make。

make[0];

编辑:

以下是我为您做的一个例子:http://jsfiddle.net/kjkzm8qm/

注意:您的 $。each($(&#34; #store-filter input&#34;)。serializeArray()... 没用,您应该通过添加选择所有输入一个AND类,你应该通过在末尾添加一个来结束输入标记。

HTML

 <input name="test" class="inputs" />

JAVASCRIPT

 $.each($(".inputs"), function(){ });

答案 2 :(得分:0)

更新大卫的回答。

如果你想删除&然后在下面添加这个代码

对于此检查,键值不为空

let keyValue = keyValues(this.id);
        if (keyValue != ''){
            return keyValue;
        }