2013-10-22 127 views
54

我在這裏發現了類似的問題,但沒有爲我工作。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]"]')

+0

可能重複的[jQuery選擇用於與所述名稱屬性方括號輸入](HTTP://計算器.com/questions/2364982/jquery-selector-for-inputs-with-square-brackets-in-the-the-name-attribute) – epascarello

+1

啊,誤讀的問題。關閉投票是錯誤的...需要使用從選擇開始。 – epascarello

+0

@epascarello - 如何開始幫助獲得所有人? – Dementic

回答

25

這通常w複選框和單選按鈕上的複選框... 但是,每個名稱都應該相同。

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

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

這是「假設」讓你在逗號分隔值的所有領域。 從來沒有嘗試過與文本框,所以不能保證它。

as @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

要遍歷每一個,使用'$('input [name =「pages_title []」]')。每個(函數(){var aValue = $(this).val();});' –

+1

抱歉,但這不起作用,正如我在我的問題中所述。只有當我有字段名稱如pages_title []而不是pages_title [1] pages_title [2] pages_title [3] – abiku

+3

時,它纔會起作用,您不應該有'[1]','[2]','[3]',這就是我想說的。 – Dementic

11

您需要使用starts with selector

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

但更好的方法是添加一個類的元素和引用的類。這是一個更快的查找的原因。

+0

然後在'name =「pages_titles」'的情況下會發生什麼?另外,爲什麼要使用一個類,當它清除「名稱」應該是相同的?有趣的額外標記? – Dementic

+2

不,它不好玩,因爲'^ ='比類選擇器慢得多。它必須解析字符串並檢查匹配。而且我根據你的回答不知道你的意思是「name =」pages_titles「' – epascarello

+1

,開頭是'也會抓住'pages_titles'(而不是'pages_title')。我同意他應該縮小選擇器的範圍,比如'#divId [name ='pages_title']'但爲什麼要添加一個類?差別會很小,不會被注意到。 – Dementic

73

使用starts with selector

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

jsfiddle example

注:與@epascarello一致認爲,更好的辦法是添加一個類的元素,並說明類。

+0

請參閱我的評論@espascarello答案。 – Dementic

+0

完美作品 – sajushko

6

你可以給你的輸入文本框的類名,比如:

<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()); 
}); 
9
var multi_members=""; 
$("input[name='bayi[]']:checked:enabled").each(function() { 
    multi_members=$(this).val()+","+multi_members; 
}); 
5

我認爲最好的辦法,就是用一個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]

1

可以逃脫方括號雙反斜線這樣的:

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

8

使用地圖的方法,我們可以得到存儲在陣列的輸入值。

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

優秀的提示,非常感謝! – ImShogun

1

你可以使用含有選擇器:

[name*=」value」]:選擇具有與含有給定的子串的值指定的屬性的元素。

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

爲了通過具有您可能喜歡在使用正則表達式模式的下面的代碼片斷創建一個新的選擇一個特定的特徵屬性來選擇的元素。正則表達式的使用是爲了使柔性新的選擇儘可能:

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[]">