Javascript 返回div中输入字段的所有值

我需要使用jquery在div层中使用所有值输入字段形成一个字符串

<div id="selection">
   <input class="field" id="1" type="hidden" value="A"/>
   <input class="field" id="2" type="hidden" value="B"/>
   <input class="field" id="3" type="hidden" value="C"/>
   <input class="field" id="4" type="hidden" value="D"/>
</div>

<input type="button" id="button" value="generate"/>

jquery:

 $(function() {
      $('#button').click(function() {
         //function goes here...


      });
    });

---

这将返回div内所有输入的所有html组合

var h = '';
var c = 0;
$('#selection input.field').each(function(){
 h += '&id['+(++c)+']=val['+$(this).val()+']';
});
h = h.slice(1);

alert(h);

---

如果您使用

名称

而不是（或除了）

标识

：

<input class="field" name="1" type="hidden" value="A"/>
<input class="field" name="2" type="hidden" value="B"/>
<input class="field" name="3" type="hidden" value="C"/>
<input class="field" name="4" type="hidden" value="D"/>

这给了你

1=A&2=B&3=C&4=D

如果您确实想拥有

id[x]

结构，可以为元素指定名称

id[1]

，

id[2]

等

编辑：哦，不知怎么的，我忽略了你也想要

val[x]

。只有在字段中真正将

val[x]

作为值输入时，

serialize

才可能实现这一点。但是为什么需要这样一个模糊的结构呢

---

顺便说一句，您的按钮缺少

type=“button”

。

<script>
    $(function() {
        $('#button').click(function() {

            var str = new Array();
            var count = 0;

            $('.field').each(
                function()
                {                   
                    str[count] = 'id['+$(this).attr('id')+']=val['+$(this).val()+']';
                    count++;
                }
            );
            alert(str.join('&'))
        });
    });
</script>
<div id="selection">
   <input class="field" id="1" type="hidden" value="A"/>
   <input class="field" id="2" type="hidden" value="B"/>
   <input class="field" id="3" type="hidden" value="C"/>
   <input class="field" id="4" type="hidden" value="D"/>
</div>
<input id="button" value="generate" type="button"/>

$（函数（）{
$（“#按钮”）。单击（函数（）{
var str=新数组（）；
var计数=0；
$（'.field'）。每个(
函数（）
{                   
str[count]='id['+$（this.attr（'id'）+']=val['+$（this.val（）+']）；
计数++；
}
);
警报（str.join（'&'））
});
});

另一种提供精确指定输出并优雅地处理缺失属性的解决方案：

:

---

使用jQueryTank中的class属性获取值非常感谢，这就足够了

1=A&2=B&3=C&4=D

<script>
    $(function() {
        $('#button').click(function() {

            var str = new Array();
            var count = 0;

            $('.field').each(
                function()
                {                   
                    str[count] = 'id['+$(this).attr('id')+']=val['+$(this).val()+']';
                    count++;
                }
            );
            alert(str.join('&'))
        });
    });
</script>
<div id="selection">
   <input class="field" id="1" type="hidden" value="A"/>
   <input class="field" id="2" type="hidden" value="B"/>
   <input class="field" id="3" type="hidden" value="C"/>
   <input class="field" id="4" type="hidden" value="D"/>
</div>
<input id="button" value="generate" type="button"/>

$(function() {
    $('#button').click(function() {

        var ResStr  = $('#selection input.field');

        ResStr  = ResStr.map (function () {
            var jThis   = $(this);
            var ID      = jThis.attr ("id");
            if (!ID)    ID  = "null";

            var VAL     = jThis.val ()
            if (!VAL)   VAL  = "null";

            return 'id[' + ID + ']=val[' + VAL + ']';

        } ).get () .join ('&');

        alert (ResStr);

    } );
} );