Jquery 获取输入数组字段

小开

const textValues = $.map($('input[type=text][name="pages_title[]"]'), function(el) { return el.value; });
console.log(textValues);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="Hello" name="pages_title[]">
<input type="text" value="World" name="pages_title[]">

小开

你需要使用从选择器开始

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

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

小开

使用从选择器开始

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

举个例子

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

小开

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

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

小开

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

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

小开

我认为最好的方法，是使用一个合适的形式和使用序列化数组。

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

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

小开

你可以像下面这样用双反斜杠转义方括号:

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

小开

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

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

小开

您可以使用包含选择器:

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

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

小开

为了通过具有特定特征的属性选择元素，您可以使用正则表达式模式创建一个新的选择器，如下面的代码片段所示。使用 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[]">

小开

最常用的是:

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

获取数组位置的键和值。

小开

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