Obtenir la valeur de la case à cocher dans jQuery

535

Comment puis-je obtenir la valeur d'une case à cocher dans jQuery?

maztt
la source

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
}
Sarfraz
la source
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" />

Alain Tiemblo
la source
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;
RDK
la source
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/

Reza
la source
.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»

Greg A
la source
14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
Nalan Madheswaran
la source
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);
    });
Jaskaran singh Rajal
la source
10

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

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

Donne true/false

Kevin Shea
la source
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

Kamal
la source
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);

Josh Crozier
la source
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;
            })()
Faraz Kelhini
la source
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
});
ttrasn
la source
0

Utilisez le code suivant:

$('input[name^=CheckBoxInput]').val();
Myint Thu Lwin
la source
0
$('.class[value=3]').prop('checked', true);
Jacksonit.org
la source
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>
Hayrullah Cansu
la source
-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>
Kuldeep Mishra
la source
-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);
hoogw
la source