jQuery：チェックボックスの値を配列として返しますか？

Question

これは私に困ってしまった。私は簡単に配列として複数選択の値を取得し、Ajaxのリクエストにそれを渡すことができます：

<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 

アイデアはありますか？ありがとう。

Answer 1

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).val()より、inputの値を取得するには上記のイテレータ関数でthis.valueを使用します。これはかなりスタイルのものであり、どちらも他の視点より優れているわけではありません。 this.valueはより直接的であり、DOMをすべて知っていれば（そしてすべてのウェブプログラマーは）、それは完全にはっきりしています。もちろん、チェックボックスや他のほとんどのinput要素を使った完全な信頼性のあるクロスブラウザでは、他のフォームフィールド（たとえばselectボックス）とのクロスブラウザでは信頼できません。 $(this).val()は、jQueryを大量に使用するアプリケーションではより慣れており、thisがinputかselectかどうかを心配する必要はありません。はい、それは間接費を追加しますが、あなたが何千というものを持っていなければ、それは問題になるようなものではありません。

Answer 2

• .map()メソッドに精通していない場合は、私のお気に入りの1つを紹介しましょう。マニュアルページの例にはチェックボックスもあります。 .get()メソッドを使用すると、jQueryコレクションをオブジェクトに変換できます。

.MAP（）：パス機能を流れる電流整合セットの各要素、 は戻り値を含む新しいjQueryオブジェクトを生成します。あなたが必要とする

• 他の知識を使用すると、属性セレクタ内のバックスラッシュで[]をエスケープしていることである：name=check\[\]]。 編集：もちろんあなたは、標準の属性セレクタの構文を使用している場合、問題ありません。このようなname="check[]"

何かが十分であろう：

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

jsFiddle Demo

Answer 3

を私が思うだろうserialize()およびserializeArray()配列は機能しますが、明らかにそれらは選択の子にのみ適用されます。

最悪の場合、私はちょうどそう

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