Javascript在执行数组``推''时给数组键命名 [英] Javascript give array Key a name while doing an array 'push'

问题描述

我有3组单选按钮，每组包含多个按钮.我可以确保在bootstrap3中为每个组使用data-toggle="buttons"时，每个组仅选择一个答案.到目前为止，一切都很好.

下面的函数在click事件中触发，并返回所选项目的值.我的问题是如何处理存储在数组values中的返回值，并为每个键指定与按钮组相对应的名称.

假设我选择Red + small + Circle，然后getValues将返回key =>值:

I have 3 groups of radio buttons each containing multiple ones. While using the data-toggle="buttons" in bootstrap3 for each group I can make sure, only one answer is selected per group. So far everything is fine.

The function below is triggered on a click event and returns the values of the selected items. My problem is how can I handle the returning values stored in the array values and give each key a name corresponding to the group set of buttons.

Assuming I select Red + small + Circle then getValues will return the key=> values :

• [0] =>红色
• [1] =>小
• [2] =>圆

现在，如果我选择small + Circle:

• [0] =>小
• [1] =>圈子

按照选择的顺序存储值，我试图获取这些值以根据选择建立查询.

The values are stored as per the order of selection, Im trying to get this values to build a query as per the selection..

我希望值以这种格式存储的地方:

Where I want the values to be store in this format :

• [颜色] => x
• [大小] => y
• [形状] => z

d

<input type="radio" name="color" value="red"/> Red     /// Grp 1 Color
<input type="radio" name="color" value="blue"/> Blue
<br/>
<input type="radio" name="size" value="small"/> small   /// Grp2  Size
<input type="radio" name="size" value ="Large"/> Large
<br/>
<input type="radio" name="shape" value="circle"/> Circle  /// Grp3 Shape
<input type="radio" name="shape" value="square"/> Square


function getValues(){

var values = [];
for(var x = 0; x < radios.length; x++){
    if(radios[x].type == "radio" && radios[x].checked){
       values.push(radios[x].value);
    }
}
return values;

}

$( "#Btn" ).click(function() {
      var x = getValues();

$.each(x, function(k, v) {

//display the key and value pair
      alert(k + ' is ' + v);

});

谢谢

推荐答案

尝试一下.

实时演示

我认为在Javascript中可以使用关联数组.

I think Associate array is possible in Javascript.

http://www.i-programmer.info/programming/javascript/1441-javascript-data-structures-the-associative-array.html

<input type="radio" name="color" class="radioGrp" value="red"/> Red  
<input type="radio" name="color" class="radioGrp" value="blue"/> Blue
<br/>
<input type="radio" name="size" class="radioGrp" value="small"/> small
<input type="radio" name="size" class="radioGrp" value ="Large"/> Large
<br/>
<input type="radio" name="shape" class="radioGrp" value="circle"/>circle
<input type="radio" name="shape" class="radioGrp" value="square"/>square

<input type='button' id="Btn" />


function getValues(){

var values = [];
var radios = document.getElementsByClassName("radioGrp");
    console.log(radios);

for(var x = 0; x < radios.length; x++){
    if(radios[x].type == "radio" && radios[x].checked){
       values[radios[x].name] = (radios[x].value);
    }
}
  return values;
}

$("#Btn").click(function() {
      var x = getValues();

     alert(x["color"]);
     alert(x["size"]);
     alert(x["shape"]);

     for(var prop in x ){
       alert( prop + " is " + x[prop] );
     }

});

您不能将$ .each用于关联数组以获取更多详细信息 http://bugs.jquery. com/ticket/4319

You can't use $.each for asscioate array for more details http://bugs.jquery.com/ticket/4319

这篇关于Javascript在执行数组``推''时给数组键命名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！