Jquery获取输入数组字段

时间:2013-10-22 22:21:24

标签: jquery

我在这里发现了类似的问题,但对我来说没什么用。

有如下输入:

<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]"]')

那样得到它

12 个答案:

答案 0 :(得分:94)

使用starts with selector

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

jsfiddle example

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

答案 1 :(得分:28)

这通常适用于Checkboxes和Radio按钮...... 但是,每个名字都应该是相同的。

<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问题,有时你需要教他们更好的方法。 (对不起,如果这听起来很傲慢)

COMMENT: 将输入定义为

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

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

答案 2 :(得分:22)

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

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

答案 3 :(得分:13)

您需要使用starts with selector

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

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

答案 4 :(得分:13)

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

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

答案 5 :(得分:7)

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

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

答案 6 :(得分:6)

我认为最好的方法是使用Propper表单并使用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[name="a-form"]).serializeArray(),
        success: function(response){
            ...
        }
    });
});
</script>

值将以PHP $_POST['field'][INDEX]提供。

答案 7 :(得分:2)

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

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

答案 8 :(得分:2)

您可以使用包含选择器:

  

[name*=”value”]:选择具有指定属性的元素,其值包含给定的子字符串。

$( document ).on( "keyup", "input[name*='pages_title']", function() {
     alert($(this).val());
});

答案 9 :(得分:1)

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

&#13;
&#13;
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);
});
&#13;
<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[]">
&#13;
&#13;
&#13;

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

  
      
  • [name^=”value”]:选择具有指定属性的元素,其值始于给定字符串。

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

  •   
  • 正则表达式

&#13;
&#13;
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);
});
&#13;
<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[]">
&#13;
&#13;
&#13;

答案 10 :(得分:0)

最常用的是:

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

获得数组位置的键和值。

答案 11 :(得分:0)

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