jQuery获取输入数组字段


75

我在这里找到了类似的问题,但对我没有任何帮助。

输入如下:

<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">

尝试获取这些字段,例如:

$('input[name="pages_title[]"]')

但结果为空:(

如何获得所有领域?我只能像$('input[name="pages_title[1]"]')



1
啊,看错了问题。结束投票是错误的...需要使用以选择器开头。
epascarello 2013年

@epascarello-如何开始帮助他们?
拉斐尔·赫斯科维奇

我制作了一个简单的插件,该插件将递归生成这些“多维输入字段”的JSON对象表示形式:codepen.io/alexweissman/pen/MyWZdN
alexw

Answers:


103

使用选择器开头

$('input[name^="pages_title"]').each(function() {
    alert($(this).val());
});

jsfiddle示例

注意:与@epascarello一致,更好的解决方案是将一个类添加到元素中并引用该类。


32

这通常适用于“复选框”和“单选”按钮...但是,每个名称应相同。

<input type="text" value="2" name="pages_title[]">
<input type="text" value="1" name="pages_title[]">

var x = $('input[name="pages_title[]"]').val();

“假设”是为了让您使用逗号分隔值的所有字段。从来没有尝试过使用文本框,所以不能保证。

正如@John所说:遍历它们。 $('input[name="pages_title[]"]').each(function() { var aValue = $(this).val(); });

编辑:并非总是您只需要回答OP问题,有时您需要教给他们更好的方法。(抱歉,这听起来很嚣张)

评论:定义输入为

<input type="text" value="1" name="pages_title[1]">
<input type="text" value="2" name="pages_title[2]">

正在破坏数组,每个输入都有一个唯一的名称,因此,它不再是数组。


3
要遍历每个对象,请使用$('input[name="pages_title[]"]').each(function() { var aValue = $(this).val(); });
Luke Shaheen 2013年

1
抱歉,但这无法正常工作,正如我在问题中所述。仅当我具有诸如pages_title []而不是pages_title [1],pagestitle [2] pages_title [3]的字段名称时,此方法才有效
2013年

3
@Dementic但这是完全合法的。您可能需要更大的尺寸name =“ page_tile [1] [name]”和name =“ page_title [2] [name]”,因此您需要支持[1]等
Dss 2014年

2
@Dss-这是合法的,但是命名来表示一个数组,[1]然后表示另一个数组[2]
Rafael Herscovici 2014年

3
-1这不仅合法,而且当我具有与字段数组关联的可变数量的字段并且绝对不能保证每个字段的顺序或包含时,这绝对是必须的。我必须能够提供唯一的ID,一旦提交我就可以依靠它。
oucil 2015年

25

使用map方法,我们可以获得存储在数组中的输入值。

var values = $("input[name='pages_title[]']").map(function(){return $(this).val();}).get();

13

您需要使用“开头为”选择器

var elems = $( "[name^='pages_title']" );

但是更好的解决方案是在元素中添加一个类并引用该类。原因是查找起来更快。


然后发生什么情况name="pages_titles"呢?另外,为什么要使用一个类,当其清除时name应该相同?有趣的额外标记?
拉斐尔·赫斯科维奇

2
不,这不好玩……因为它^=比类选择器慢很多。它必须解析字符串并检查是否匹配。我不知道您对name="pages_titles"
epascarello的

1
根据您的回答,开头也将成为pages_titles(而不是pages_title)。我同意他应该将他的选择范围缩小到类似,#divId[name='pages_title']但是为什么要添加一个类呢?差异将很小,不会被注意到。
2013年

由于没有提到ajax,因此还有一件事(很抱歉。),该表格可能会定期提交,对于您的add class解决方案,他将不会在服务器端获得任何结果。
2013年

1
这个答案很有趣,即使对正则表达式解析的使用有了更深的思考,例如对于插件来说,最好还是选择类-更快,与epascarello一致。
亚瑟·库什曼

13

将输入名称放在单引号之间,以便将方括号[]视为字符串

var multi_members="";
$("input[name='bayi[]']:checked:enabled").each(function() {
    multi_members=$(this).val()+","+multi_members;
});

9

您可以给输入文本框类名称,如下所示:

<input type="text" value="2" name="pages_title[1]" class="pages_title">
<input type="text" value="1" name="pages_title[2]" class="pages_title">

并像这样迭代:

$('input.pages_title').each(function() {
    alert($(this).val()); 
});

很好的答案。它对我帮助很大。
Sumit Kumar Gupta,

7

我认为最好的方法是使用Propper Form和jQuery.serializeArray

<!-- a form with any type of input -->
<form class="a-form">
    <select name="field[something]">...</select>
    <input type="checkbox" name="field[somethingelse]" ... />
    <input type="radio" name="field[somethingelse2]" ... />
    <input type="text" name="field[somethingelse3]" ... />
</form>

<!-- sample ajax call -->
<script>
$(document).ready(function(){
    $.ajax({
        url: 'submit.php',
        type: 'post',
        data: $('form.a-form').serializeArray(),
        success: function(response){
            ...
        }
    });
});
</script>

这些值将在PHP中以形式提供$_POST['field'][INDEX]


3

最常用的是:

$("input[name='varname[]']").map( function(key){
    console.log(key+':'+$(this).val());
})

惠特您获得了数组位置和值的键。


2

您可以使用双反斜杠将方括号转义,如下所示:

$('input[name="pages_title\\[\\]"]')



1

为了通过具有特定特征的属性选择元素,您可以使用正则表达式模式创建一个新的选择器,如以下代码片段所示。regex的使用旨在使新选择器尽可能灵活:

jQuery.extend(jQuery.expr[':'], {
    nameMatch: function (ele, idx, selector) {
        var rpStr = (selector[3] || '').replace(/^\/(.*)\/$/, '$1');
        return (new RegExp(rpStr)).test(ele.name);
    }
});


//
// use of selector
//
$('input:nameMatch(/^pages_title\\[\\d\\]$/)').each(function(idx, ele) {
  console.log(ele.outerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">
<input type="text" value="1" name="pages_title[]">

另一个解决方案可以基于:

  • [name ^ =“ value”]:选择具有指定属性的元素,该元素的值完全以给定的字符串开头。

  • .filter():将匹配元素的集合减少为与选择器匹配或通过功能测试的元素。

  • 正则表达式模式

var selectedEle = $(':input[name^="pages_title"]').filter(function(idx, ele) {
    //
    // test if the name attribute matches the pattern.....
    //
    return  /^pages_title\[\d\]$/.test(ele.name);
});
selectedEle.each(function(idx, ele) {
    console.log(ele.outerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">
<input type="text" value="1" name="pages_title[]">


0
var data = $("input[name='page_title[]']")
  .map(function () {
    return $(this).val();
  })
  .get();

6
修改您的答案,以说明其工作原理以及为什么是问题中所述问题的解决方案。请参阅如何回答
Yunnosch
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.