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>

jquery checkbox jquery-selectors

— Juozas Kontvainis
소스

434

두 가지 이전 답변의 조합 :

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

— nikc.org
소스

9

$ (this) .checked가 작동하지 않습니다. if ($ (this) .attr ( 'checked')) 또는 if ($ (this) .is ( ': checked')) 사용

— Stefan Steiger

경우 .attr('checked')나 .prop('checked')또는 .is(':checked')작동하지 않음, 시도.get(0).checked

— emfi

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(...)더 간결 할 것입니다. Jansen이 지적했듯이, 그것은 $(this).attr("name"); 그러나 나는 this.name호환 가능한 단순한 것을 고려할 것 입니다.

— Alex Barrett

1

이것은 간단한지도에 좋았습니다. 나는 변화 children하는 find깊이보고, 그리고 필요한 JQuery와 그렇게 사용 속성 $(this) (... 그리고 다시 찾고 올 때이 댓글을 쓰셨)

— goodeye

24

확인 된 모든 확인란의 개수가 필요했습니다. 루프를 작성하는 대신 이것을했습니다.

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

총 확인란 수와 비교하여 동일한 지 확인하십시오. 누군가에게 도움이되기를 바랍니다.

— Usman Shaukat
소스

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

— SharpC
소스

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