jQueryを使用してdivでチェックされているチェックボックスのリストを取得する


231

特定のIDのdivで選択されているチェックボックスの名前のリストを取得したい。jQueryを使用してどうすればよいですか?

たとえば、このdivの場合、配列["c_n_0"を取得します。"c_n_3"]または文字列 "c_n_0; c_n_3"

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

回答:


434

以前の2つの回答の組み合わせ:

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

10
そして別のコンボ:var selected = $( '#checkboxes input:checked')。map(function(i、el){return el.name;})。get(); // .join( ';')を追加して、結合された文字列を取得します
roberkules

1
@アレックスLE。選択したチェックボックスの数のみを取得するにはどうすればよいですか?div内のチェックボックスがオンになっているかどうかを確認するだけです。
ashishjmeshram

1
@アシッシュ。ただ書く:var count = $( '#checkboxes input:checked')。length;
Alex LE

2
コンストラクタの不要な呼び出しvar selected = new Array();。より良い(安い)var selected = [];
Pono

change機能でどのように取得しますか?
Si8

54

これでいいですか?

var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
   if ($(this).is(":checked")) {
       selected.push($(this).attr('name'));
   }
});

9
$(this).checkedは機能しません。if($(this).attr( 'checked'))またはif($(this).is( ':checked'))を使用
Stefan Steiger

機能する場合.attr('checked').prop('checked')または.is(':checked')機能しない場合は、試してください.get(0).checked
emfi '23

37
$("#checkboxes").children("input:checked")

要素自体の配列を提供します。特に名前が必要な場合:

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});

2
これはthis.nameを返すか、$(this).attr( 'name');を返す必要があると思います。
Jansen価格

4
$("#checkboxes :checked").map(...)より簡潔になります。ヤンセンが指摘するように、それはそうあるべきです$(this).attr("name")。しかし、私はthis.name互換性のあるシンプルなものを検討します。
Alex Barrett

1
これは単純なマップに最適でした。私はより深く見えるように変更childrenfind、使用したjquery属性が必要でした$(this) (そして、もう一度見に来たときにこのコメントを書きました...)
goodeye

24

チェックされているすべてのチェックボックスの数が必要でした。ループを書く代わりにこれをやった

$(".myCheckBoxClass:checked").length;

チェックボックスの総数と比較して、それらが等しいかどうかを確認します。それが誰かを助けることを願って


9

これは私にとってはうまくいきます。

var selecteditems = [];

$("#Div").find("input:checked").each(function (i, ob) { 
    selecteditems.push($(ob).val());
});

6

また、すべて同じ名前を付けて配列にすることもできますが、異なる値を指定することもできます

<div id="checkboxes">
    <input type="checkbox" name="c_n[]" value="c_n_0" checked="checked" />Option 1
    <input type="checkbox" name="c_n[]" value="c_n_1" />Option 2
    <input type="checkbox" name="c_n[]" value="c_n_2" />Option 3
    <input type="checkbox" name="c_n[]" value="c_n_3" checked="checked" />Option 4
</div>

次に、mapを使用して、チェックされたものの値のみを取得できます

$('#checkboxes input:checked[name="c_n[]"]')
            .map(function () { return $(this).val(); }).get()

0
function listselect() {
                var selected = [];
                $('.SelectPhone').prop('checked', function () {

                    selected.push($(this).val());
                });

                alert(selected.length);
     <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="1" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="2" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="3" />
        <button onclick="listselect()">show count</button>

0
 var agencias = [];
 $('#Div input:checked').each(function(index, item){
 agencias.push(item.nextElementSibling.attributes.for.nodeValue);
 });

このソリューションの利点は何ですか?
Luis Gouveia
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.