web-dev-qa-db-fra.com

Utiliser jquery pour obtenir toutes les cases à cocher 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 je l’utilise maintenant sur une page qui contient d’autres cases à cocher que je ne souhaite pas inclure. Comment pourrais-je changer le code ci-dessus pour ne regarder que les cases à cocher ayant une certaine classe dessus?

jqueryjquery-selectorscheckbox
170
leora

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

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

Un exemple à démontrer. 

:checkbox est un sélecteur de cases à cocher (en fait, vous pouvez omettre la partie input du sélecteur, bien que j’ai trouvé des cas particuliers dans lesquels vous obtiendriez des résultats étranges dans les versions précédentes de la bibliothèque. ) ..class est le sélecteur d'attribut de classe d'élément contenant class.

107
Russ Cam

Obligatoire .map example:

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));
63
karim79
$('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 procéder à une vérification conditionnelle. Personnellement, je voudrais aussi utiliser un tableau pour stocker la valeur, puis les utiliser au besoin, comme:

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

Si vous devez obtenir la valeur toutes les cases à cocher cochées sous forme de tableau:

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.Push(this.value);
    });
    return a;
})()
11
Faraz Kelhini
 $('input.theclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : "");
 });
8
Alp

Je ne sais pas si cela vous aidera dans votre cas particulier ni si, dans votre cas, les cases à cocher que vous souhaitez uniquement inclure font partie d'un seul formulaire, div ou tableau, mais vous pouvez toujours les sélectionner toutes. à 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, à l'aide de la requête jQuery suivante, il vérifie UNIQUEMENT les cases à cocher de cette UL avec id = "sélectif":

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

Voir Les sélecteurs de classe jQuery .

7
Liza Daly

Un moyen simple d'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);
6
Caike Bispo
<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

4
Debendra Dash

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 les valeurs 1 et 3.

3
Philip Voloshin

Je sais que cette question a déjà fait l’objet de très bonnes réponses, mais j’ai trouvé ceci en naviguant et j’ai trouvé cela très facile à utiliser. Je pensais partager avec quiconque cherche.

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:"Check All" le plus simple avec jQuery

3
Tony

Tu peux essayer comme ça

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