web-dev-qa-db-fra.com

Obtenir la valeur de la case à cocher dans jQuery

Comment obtenir une valeur de case à cocher dans jQuery?

jqueryhtmlformscheckbox
418
maztt

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 une class ou id pour cela, vous pouvez:

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

Toutefois, que cette option retourne la valeur same qu'elle soit cochée ou non, cela peut prêter à confusion car il diffère du comportement du formulaire soumis.

Pour vérifier si elle est cochée ou non, faites:

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

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" />
188
Alain Tiemblo

Essayez cette petite solution: 

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

ou

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

La seule manière correcte de récupérer la valeur d'une case à cocher est la suivante

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é property de la case à cocher, elles vérifient l'attribut, ce qui signifie qu'elles testent l'état initial de la case à cocher lors du chargement. Donc en 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 utiliser $(elem).prop("checked") si vous souhaitez vous appuyer sur jQuery.
  • Si vous avez besoin de connaître (ou de comparer) la valeur lors du premier chargement de l’élément (c’est-à-dire la valeur par défaut), la méthode correcte pour le faire est $(elem).is(":checked").

Les réponses sont trompeuses, veuillez vérifier ci-dessous:

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

25
Reza

Juste pour clarifier les choses:

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

Retournera 'vrai' ou 'faux'

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

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

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

Donne true/false

7
Kevin Shea

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

Sans jQuery:

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

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

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

Voici un exemple rapide d'écoute de l'événement change:

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 le pseudo-classe :checked (input[type="checkbox"]:checked).

Voici un exemple qui parcourt les éléments input 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);


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

console.log(checkedElements);
<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

6
Josh Crozier
//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
Démo

5
Kamal

Voici comment obtenir la valeur de toutes les cases à cocher cochées sous forme de tableau:

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

Utilisez le code suivant:

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

Attention, à compter d’aujourd’hui 2018, en raison des changements d’API au fil des ans. removeAttr sont supprimés et ne fonctionnent plus!

Jquery Cocher ou décocher une case à cocher: 

Mauvais, ne travaille 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);
0
hoogw