Obtenir la valeur de la case à cocher dans jQuery


Réponses:


1062

Pour obtenir la valeur de l'attribut Value, vous pouvez faire quelque chose comme ceci:

$("input[type='checkbox']").val();

Ou si vous avez défini un classou idpour cela, vous pouvez:

$('#check_id').val();
$('.check_class').val();

Cependant, cela renverra la même valeur, qu'elle soit cochée ou non, cela peut être déroutant car il est différent du comportement du formulaire soumis.

Pour vérifier s'il est vérifié ou non, procédez comme suit:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

3
Que fait le premier exemple s'il y a plusieurs cases à cocher sur la page? Btw, il peut être écrit de manière plus courte $("input:checkbox"). De plus, il semble y avoir une faute de frappe dans le sélecteur de classe ...
Jawa

1
@Jawa: Le premier n'était qu'un exemple pour montrer la syntaxe et merci pour cette faute de frappe.
Sarfraz

136
Si j'essaye $($0).val()dans Chrome et décochez la case, la réponse est "on" même si elle n'est pas cochée. Mais $($0).is(":checked")renvoie la bonne valeur.
Adrien

2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] a de meilleures performances que dans les navigateurs modernes :checkbox.
TrueWill

3
Remplacez $('#check_id').val();pour $('#check_id').is(":checked");renvoyer la valeur true ou false.
Matheus Miranda

228

Ces 2 façons fonctionnent:

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked')(merci @mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />


9
.is ('vérifié') n'a pas fonctionné car il devrait l'être .is (': vérifié')
mgsloan

Merci pour votre réponse. Ceci est une réponse de pointe avec la fonction jQuery prop ()
Thomas.Benz

58

Essayez cette petite solution:

$("#some_id").attr("checked") ? 1 : 0;

ou

$("#some_id").attr("checked") || 0;

Ou !! ($ ("# some_id"). Attr ("vérifié"))
COOLGAMETUBE

34

Les seules façons correctes de récupérer la valeur d'une case à cocher sont les suivantes

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

comme expliqué dans les documentations officielles sur le site Web de jQuery. Le reste des méthodes n'a rien à voir avec la propriété de la case à cocher, ils vérifient l'attribut, ce qui signifie qu'ils testent l'état initial de la case à cocher lors de son chargement. Bref:

  • Lorsque vous avez l'élément et que vous savez qu'il s'agit d'une case à cocher, vous pouvez simplement lire sa propriété et vous n'aurez pas besoin de jQuery pour cela (c'est-à-dire elem.checked) ou vous pouvez l'utiliser $(elem).prop("checked")si vous voulez vous fier à jQuery.
  • Si vous avez besoin de connaître (ou de comparer) la valeur lorsque l'élément a été chargé pour la première fois (c'est-à-dire la valeur par défaut), la bonne façon de procéder est $(elem).is(":checked").

Les réponses sont trompeuses, veuillez vérifier ci-dessous vous-même:

http://api.jquery.com/prop/


.is(":checked")et .prop(":checked")fonctionnent de la même manière pour moi avec jQuery 1.10.0
Josh

23

Juste pour clarifier les choses:

$('#checkbox_ID').is(":checked")

Renvoie «vrai» ou «faux»


14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

ne marche pas. vous pourriez avoir besoin d'une colonne avant de vérifier ": vérifié"
utileBee

9
.val () ne fonctionne pas. Renvoie «on» indépendamment de la vérification.
Michael Cole

11
jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });

10

Simple mais efficace et suppose que vous savez que la case à cocher sera trouvée:

$("#some_id")[0].checked;

Donne true/false


9
//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

Exemple de
démonstration


5

Malgré le fait que cette question demande une solution jQuery, voici une réponse JavaScript pure puisque personne ne l'a mentionnée.

Sans jQuery:

Sélectionnez simplement l'élément et accédez à la checkedpropriété (qui renvoie un booléen).

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);
<input type="checkbox"/>


Voici un exemple rapide en écoutant l' changeévénement:

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});
<input type="checkbox"/>


Pour sélectionner les éléments cochés, utilisez la :checkedpseudo-classe ( input[type="checkbox"]:checked).

Voici un exemple qui itère sur les inputéléments vérifiés et renvoie un tableau mappé des noms des éléments vérifiés.

Exemple ici

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);


1
Cela ne répond pas à la question.
Michael Cole

@MichaelCole - Je viens de relire la question (3 ans plus tard) et il semble que cela réponde effectivement à la question, alors n'hésitez pas à élaborer.
Josh Crozier

1
"Comment puis-je obtenir la valeur d'une case à cocher dans jQuery?" -> "Malgré le fait que cette question demande une solution jQuery ... bla bla bla". C'est une réponse de boîte à savon, à la manière d'autres réponses réelles, et c'est pourquoi je l'ai décotée.
Michael Cole

1
@MichaelCole - Assez juste, les commentaires sont toujours appréciés. L'intention initiale de cette réponse était d'indiquer que jQuery peut être évité dans des cas triviaux comme celui-ci lorsque la checkedpropriété est facilement accessible sur l'élément DOM natif. Certaines personnes qui recherchent des questions / réponses comme celles-ci ne savent généralement pas que jQuery n'est pas parfois nécessaire. En d'autres termes, les personnes bornées ne sont pas la cible démographique pour cette réponse.
Josh Crozier

2

Voici comment obtenir la valeur de toutes les cases à cocher en tant que tableau:

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

2

pour obtenir la valeur de checkboxex cochée dans jquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

dans pure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});


0
$('.class[value=3]').prop('checked', true);

1
La question est de savoir comment obtenir la valeur et non comment vérifier quelque chose avec une valeur par défaut particulière.
Quentin

0

Le meilleur moyen est $('input[name="line"]:checked').val()

Et vous pouvez également obtenir le texte sélectionné $('input[name="line"]:checked').text()

Ajoutez un attribut de valeur et un nom à vos entrées de bouton radio. Assurez-vous que toutes les entrées ont le même attribut de nom.

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>

-1
<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>

-1

Juste attention, à compter d'aujourd'hui 2018, en raison de l'évolution de l'API au fil des ans. removeAttr sont privés, ne fonctionnent plus!

Jquery Cochez ou décochez une case:

Mauvais, ne fonctionne plus.

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

Au lieu de cela, vous devriez faire:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.