Korzystanie z jquery, aby uzyskać wszystkie zaznaczone pola wyboru o określonej nazwie klasy

Wiem, że mogę uzyskać wszystkie zaznaczone pola wyboru na stronie, używając tego:

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

Ale teraz używam tego na stronie, która ma inne pola wyboru, których nie chcę uwzględniać. Jak mam zmienić powyższy kod, aby patrzeć tylko na zaznaczone pola wyboru, które mają określoną klasę?

$('.theClass:checkbox:checked')da ci wszystkie zaznaczone pola wyboru z klasą theClass.

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

Przykład do zademonstrowania.

:checkboxjest selektorem dla pól wyboru (w rzeczywistości można pominąć inputczęść selektora, chociaż znalazłem niszowe przypadki, w których można uzyskać dziwne wyniki, robiąc to we wcześniejszych wersjach biblioteki. Jestem pewien, że zostały naprawione w późniejszych wersjach). .classjest selektorem zawierającym atrybut klasy elementu class.

Obowiązkowy .mapprzykład:

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

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

Otrzymałoby to wszystkie pola wyboru nazwy klasy „twojaKlasa”. Podoba mi się ten przykład, ponieważ używa sprawdzonego selektora jQuery zamiast sprawdzania warunkowego. Osobiście użyłbym również tablicy do przechowywania wartości, a następnie używałbym ich w razie potrzeby, takich jak:

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

Jeśli chcesz uzyskać wartość wszystkich zaznaczonych pól wyboru jako tablicę:

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

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

Nie jestem pewien, czy to pomaga w konkretnej sprawie, i nie jestem pewien, czy w twoim przypadku pola wyboru, które chcesz uwzględnić, są tylko częścią pojedynczego formularza lub div lub tabeli, ale zawsze możesz zaznaczyć wszystkie pola wyboru wewnątrz określonego elementu. Na przykład:

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

Następnie, używając następującego jQuery, przechodzi TYLKO przez pola wyboru w obrębie tego UL o id = "selektywne":

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

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

Zobacz selektory klas jQuery .

Możesz użyć czegoś takiego:
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")

Wybierze wartości 1 i 3.

Prosty sposób na umieszczenie wszystkich wartości w tablicy

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

})();

console.log(valores);

Możesz spróbować w ten sposób

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

<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

Wiem, że ma już wiele świetnych odpowiedzi na to pytanie, ale znalazłem to podczas przeglądania i bardzo łatwo jest z niego korzystać. Pomyślałem, że podzielę się tym, kto szuka.

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

Odniesienie: Najłatwiejszy „Sprawdź wszystko” dzięki jQuery

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

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