jquery를 사용하여 특정 클래스 이름을 가진 모든 확인란을 선택하십시오.


215

다음을 사용하여 페이지에서 모든 확인란을 선택할 수 있음을 알고 있습니다.

$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

그러나 나는 이것을 포함하고 싶지 않은 다른 확인란이있는 페이지에서 이것을 사용하고 있습니다. 특정 클래스가있는 확인란을 선택하도록 위의 코드를 어떻게 변경합니까?


class대신 제목을 업데이트해야 name합니까?
Russ Cam

@Russ Cam-이미 완료
leora

$ ( 'input [type = checkbox] :checked')도 작동합니다.
super cool

답변:


392

$('.theClass:checkbox:checked')클래스와 함께 선택된 모든 확인란을 제공합니다 theClass.


9
좋은. 또한 $ ( '. theClass : checkbox : not (: checked)')는 확인되지 않은 모든 항목을 가져옵니다.
Venugopal M

이름이있는 모든 확인란에 대해이 작업을 수행 할 수 있습니까?
FluffyBeing

확인 된 요소에 다른 클래스를 추가하려면 어떻게해야합니까? 확인 된 입력 요소에 테두리를 표시하고 싶습니다.
Najam Us Saqib

120
$('input:checkbox.class').each(function () {
       var sThisVal = (this.checked ? $(this).val() : "");
  });

예로 설명합니다.

:checkbox확인란의 선택기입니다 (실제로 input이전 버전의 라이브러리에서 이상한 결과를 얻을 수있는 틈새 사례를 찾았지만 실제로는 선택기 의 일부를 생략 할 수 있습니다. 나는 그것들이 이후 버전에서 고정되어 있다고 확신합니다). .class를 포함하는 요소 클래스 속성의 선택기입니다 class.


9
: checkbox에 대한 Jquery 노트는 [type = "checkbox"]를 사용하는 것이 좋습니다. $ ( '[type = "checkbox"]. class') .... 또는 $ ( 'input [type = "checkbox"]. class')
TSmith

@TSmith 참조가 있습니까?
Russ Cam

9
나는 여기에서 그것을 읽었다 : api.jquery.com/checkbox-selector ... "추가 노트"
TSmith

73

의무적 인 .map예 :

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));

3
$ ( 'input.theClass : checked'). map (function () {return this.value}). get (). join ( ',');
Fedir RYKHTIK

@Fedir : 명령 on,on에 결과가 표시됩니다 (확인란마다 'on')
Jay

@Jay 쉼표로 구분 된 문자열로 값을 가져 오려면 확인란의 값 속성을 설정해야합니다.
Kamran Ali

21
$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

클래스 이름 "yourClass"의 모든 확인란이 표시됩니다. 나는이 예처럼이의 jQuery 셀렉터를 사용하기 때문에 검사 조건 검사를하고 대신. 개인적으로 배열을 사용하여 값을 저장 한 다음 필요에 따라 다음과 같이 사용합니다.

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});

배열에 값을 저장해야 .map할 경우 karim79의 답변에서 볼 수 있듯이 더 쾌적한 대안이 될 수 있습니다.
duplode

1
고맙습니다 :) 모든 확인란을 찾아야했고 대답은 그렇게합니다.
ufk

13

모든 확인란 의 값을 배열로 가져와야 하는 경우 :

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()

10
 $('input.theclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : "");
 });

8

귀하의 특정 경우에 도움이되는지 확실하지 않으며 귀하의 경우 포함하려는 확인란이 모두 단일 양식 또는 div 또는 표의 일부인지 확실하지 않지만 항상 모든 확인란을 선택할 수 있습니다 특정 요소 내부. 예를 들면 다음과 같습니다.

<ul id="selective">
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
</ul>

그런 다음 다음 jQuery를 사용하여 id = "selective"를 사용하여 해당 UL 내의 확인란 만 선택합니다.

$('#selective input:checkbox').each(function () {
 var sThisVal = (this.checked ? $(this).val() : "");
});


7

다음과 같은 것을 사용할 수 있습니다 :
HTML :

<div><input class="yourClass" type="checkbox" value="1" checked></div>
<div><input class="yourClass" type="checkbox" value="2"></div>
<div><input class="yourClass" type="checkbox" value="3" checked></div>
<div><input class="yourClass" type="checkbox" value="4"></div>


jQuery :

$(".yourClass:checkbox").filter(":checked")


1과 3의 값을 선택합니다.


이것이 가장 좋은 대답입니다.
마르코스 부아 케

7

모든 값을 배열로 가져 오는 간단한 방법

var valores = (function () {
    var valor = [];
    $('input.className[type=checkbox]').each(function () {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);

7

당신은 이렇게 시도 할 수 있습니다

let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();

4
<input type="checkbox" id="Checkbox1" class = "chk" value = "1" />
<input type="checkbox" id="Checkbox2" class = "chk" value = "2" />
<input type="checkbox" id="Checkbox3" class = "chk" value = "3" />
<input type="checkbox" id="Checkbox4" class = "chk" value = "4" />
<input type="button" id="demo" value = "Demo" />

<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $("#demo").live("click", function () {
        $("input:checkbox[class=chk]:checked").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
        });
    });
</script>

http://www.jqueryfaqs.com/Articles/Get-values-of-all-checked-checkboxes-by-class-name-using-jQuery.aspx


3

나는 이것이 이미이 질문에 대한 훌륭한 답변을 가지고 있음을 알고 있지만 둘러 보면서 이것을 발견했으며 사용하기가 정말 쉽다는 것을 알았습니다. 다른 사람을 찾고 있다고 생각했습니다.

HTML :

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

jQuery :

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});

참조 : jQuery로 가장 쉬운 "모두 확인"


1
$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});

처음에는 이해하기 쉽도록 답변을 설명하기 위해 의견을 추가해보십시오
Simas Joneliunas

-1
$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()

1
이 코드가 무엇인지 설명하십시오. 다른 사람들이 이해하는 데 도움이 될 것입니다
Shafin Mahmud
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.