Utiliser jquery pour obtenir toutes les cases cochées avec un certain nom de classe

Je sais que je peux obtenir toutes les cases à cocher sur une page en utilisant ceci:

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

Mais j'utilise maintenant ceci sur une page qui a d'autres cases à cocher que je ne veux pas inclure. Comment changer le code ci-dessus pour ne regarder que les cases à cocher qui ont une certaine classe dessus?

$('.theClass:checkbox:checked')vous donnera toutes les cases cochées avec la classe theClass.

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

Un exemple à démontrer.

:checkboxest un sélecteur de cases à cocher (en fait, vous pouvez omettre la inputpartie du sélecteur, bien que j'aie trouvé des cas de niche où vous obtiendriez des résultats étranges en faisant cela dans les versions antérieures de la bibliothèque. Je suis sûr qu'ils sont corrigés dans les versions ultérieures). .classest le sélecteur de l'attribut de classe d'élément contenant class.

.mapExemple obligatoire :

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

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

Cela obtiendrait toutes les cases à cocher du nom de classe "yourClass". J'aime cet exemple car il utilise le sélecteur jQuery vérifié au lieu de faire une vérification conditionnelle. Personnellement, j'utiliserais également un tableau pour stocker la valeur, puis les utiliser au besoin, comme:

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

Si vous devez obtenir la valeur de toutes les cases à cocher en tant que tableau:

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() : "");
 });

Je ne sais pas si cela vous aide dans votre cas particulier, et je ne sais pas si dans votre cas, les cases à cocher que vous souhaitez inclure uniquement font toutes partie d'un seul formulaire ou div ou tableau, mais vous pouvez toujours sélectionner toutes les cases à cocher à l'intérieur d'un élément spécifique. Par exemple:

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

Ensuite, en utilisant le jQuery suivant, il passe UNIQUEMENT par les cases à cocher dans cet UL avec id = "selective":

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

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

Voir Sélecteurs de classe jQuery .

Vous pouvez utiliser quelque chose comme ceci:
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")

Il choisira des valeurs de 1 et 3.

Un moyen simple pour obtenir toutes les valeurs dans un tableau

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

})();

console.log(valores);

Vous pouvez essayer comme ça

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

Je sais que cela a déjà un tas de bonnes réponses sur cette question, mais j'ai trouvé cela en parcourant et je le trouve vraiment facile à utiliser. Je pensais que je partagerais pour tous ceux qui cherchent.

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

Référence: "Vérifier tout" le plus facile avec 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()