来自表单输入名称的动态变量名称

Question

How would i create a dynamic variable name based on all the forms input checkbox list names? This is what i have so far

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[]"

sample 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>

so later on in my code i can create a url string ?make=1,2,3&store=40,5,6&time=1,2,3,4 etc

the $_GET parameters are taken from the input check boxes name's dynamically

Answer 1

I'd suggest the following approach, obviously I'm binding to the click of a button, you should add that to the event/interaction of your choice:

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

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

References:

• CSS:
  • Attribute-presence and value ( [attribute] , [attribute="value"] ) selectors .
• JavaScript:
  • Array.prototype.join() .
  • defaultChecked and defaultValue ( HTMLInputElement ) .
• jQuery:
  • get() .
  • map() .

Answer 2

You are in Javascript, you do not need to declare the size of your arrays, there is no propblems by adding/removing anything from an Object/Array.

You should create a variable make then get the values in. Finally, you will be able to get it back.

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

Later in your code, you will use the array make.

make[0];

EDIT:

Here is an example i did for you: http://jsfiddle.net/kjkzm8qm/

NOTE: Your $.each($("#store-filter input").serializeArray() ... is useless, you should select all your inputs by adding a class AND, you should END your input tags by adding a / at the end.

HTML

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

JAVASCRIPT

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

Answer 3

Update for david's answer.

If you want to remove & then add this code below

For this check the key value is not null

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