Obtenir la valeur de la case à cocher dans jQuery

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

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
}

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

Essayez cette petite solution:

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

ou

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

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/

Juste pour clarifier les choses:

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

Renvoie «vrai» ou «faux»

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

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

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

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

Donne true/false

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

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

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>

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

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

Utilisez le code suivant:

$('input[name^=CheckBoxInput]').val();

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

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>

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

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