jQuery：將複選框的值作爲數組返回？

這讓我很難過。我可以很容易地得到一個多選作爲一個數組的值，並將其傳遞給Ajax請求：jQuery：將複選框的值作爲數組返回？

<select id="countries" class="multiselect" multiple="multiple" name="countries[]"> 
    <option value="AFG">Afghanistan</option> 
    <etc> 
... 
$countries_input = $("#countries"); 
var countries = $countries_input.val(); 
$.ajax({ 
    data: { 
    country : countries, 
    ... 
    }, 
    ... 
});

，但我無法找到任何等同方法與多種選擇，得到複選框的值。顯而易見的東西不起作用：

<input type="checkbox" name="check[]" value="foo1"/>foo1<br/> 
<input type="checkbox" name="check[]" value="foo2"/>foo2<br/> 
... 
var bar = $('input:checkbox[name=check]').val();   // undefined 
var bar = $('input:checkbox[name=check[]]').val();  // also undefined 
var bar = $('input:checkbox[name=check]:checked').val(); // also undefined

任何想法？謝謝。

來源

2011-12-06 EML

環繞你的屬性選擇在引號。 '$（'input：checkbox [name =「check []」]'）。val（）;' –

謝謝你們 - 我在這裏學到了很多東西。我不喜歡'回答滴答'的東西，但給了它TJC，因爲他在一分鐘前得到了......但我確實喜歡jsFiddle的東西。 – EML

沒有內置的jQuery函數，該函數。你必須自己做。你可以這樣做很輕鬆地用一個簡單的循環：

var vals = [] 
$('input:checkbox[name="check[]"]').each(function() { 
    vals.push(this.value); 
});

或者，如果你只是想選中的：

var vals = [] 
$('input:checkbox[name="check[]"]').each(function() { 
    if (this.checked) { 
     vals.push(this.value); 
    } 
});

或者你可以使用map和get：

var vals = $('input:checkbox[name="check[]"]').map(function() { 
    return this.value; 
}).get();

或者如果你只希望那些檢查：

var vals = $('input:checkbox[name="check[]"]').map(function() { 
    return this.checked ? this.value : undefined; 
}).get();

邊注1：jQuery的需要在屬性值選擇（上述類型）總是用引號括起來，但截至記者發稿，儘管證明它仍然鬆懈它的價值。這是一個jQuery的事情，但在這種情況下，你需要它的CSS以及（CSS2 Reference | CSS3 Reference），因爲你的價值包括：[]，這不適用於沒有CSS引號值。（在CSS中，不帶引號的值必須identifiers。）

附註2：請注意我在迭代函數中使用this.value上面得到input的價值，而不是$(this).val()。這幾乎只是一種風格，從各個角度來看都不如其他人更好。 this.value更直接，如果你知道DOM（和每個網絡程序員都應該），那就很清楚了。不過，當然，同時完全可靠的跨瀏覽器與複選框和其他大多數input元素，它是不可靠的跨瀏覽器與其他一些表單字段（select盒，例如）。 $(this).val()是一個jQuery密集型應用程序更地道，而且你不必擔心this是否爲input或select。是的，它增加了開銷，但是如果你沒有數以千計的話，那就不是那麼重要。

來源

2011-12-06 21:36:34

如果你把你的屬性選擇器放在字符串中，你不需要轉義方括號，就像[你應該]（http://api.jquery.com/category/selectors/attribute-selectors/）：' $（ '輸入：複選框[名稱= 「校驗[]」]'）VAL（）;'。 –

@火箭：謝謝。奇怪的是，我只是在想「嘿，等等，我忘了jQuery需要引號」（這是一個jQuery的東西，而不是CSS的東西）。 –

如果您不熟悉.map()方法，請讓我介紹一下我的最愛。手冊頁上的示例還具有複選框。 .get()方法可用於將jQuery集合轉換爲對象。

.MAP（）：通行證在當前的每個元件通過與之匹配的功能設定，生產含有的返回值的新jQuery對象。

你需要其他的知識是，你必須逃脫[]與屬性選擇器裏面反斜線：name=check\[\]]。 編輯：當然，如果你使用標準的屬性選擇語法，不會有問題：name="check[]"

像這樣的東西就夠了：

var checkedValues = $('input:checkbox[name="check[]"]:checked').map(function() { 
    return $(this).val(); 
}).get();

jsFiddle Demo

來源

2011-12-06 21:37:22 kapa

@Rocket謝謝，在TJ的回答下看到您的評論，並已開始糾正我的錯誤。 – kapa

@火箭感謝您編輯小提琴，忘了這一點。 – kapa

我想serialize()和serializeArray()數組可以工作，但顯然他們只適用於選擇的孩子。

最壞的情況我只想用map()得到陣列，像這樣

country : $("your input selector").map(function() {return $(this).val();})

來源

2011-12-06 21:41:29

jQuery：將複選框的值作爲數組返回？

回答

相關問題