web-dev-qa-db-fra.com

Vérifier si la case à cocher est cochée avec jQuery

Comment puis-je vérifier si une case à cocher dans un tableau de cases à cocher est cochée à l'aide de l'id du tableau de cases à cocher?

J'utilise le code suivant, mais il retourne toujours le nombre de cases à cocher cochées, quel que soit l'identifiant.

function isCheckedById(id) {
  alert(id);
  var checked = $("input[@id=" + id + "]:checked").length;
  alert(checked);

  if (checked == 0) {
    return false;
  } else {
    return true;
  }
}
javascriptjquerycheckbox
1000
Jake

Les identifiants doivent être uniques dans votre document, ce qui signifie que vous ne devriez pas faites ceci:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Au lieu de cela, supprimez l'ID, puis sélectionnez-les par nom ou par un élément contenant

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

Et maintenant le jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
613
nickf
$('#' + id).is(":checked")

Cela se produit si la case à cocher est cochée.

Pour un tableau de cases avec le même nom, vous pouvez obtenir la liste des cases cochées par:

var $boxes = $('input[name=thename]:checked');

Ensuite, pour les parcourir en boucle et voir ce qui est vérifié, vous pouvez le faire:

$boxes.each(function(){
    // Do stuff here with this
});

Pour trouver combien sont cochés, vous pouvez faire:

$boxes.length;
1809
John Boker
$('#checkbox').is(':checked');

Le code ci-dessus renvoie true si la case à cocher est cochée ou false sinon.

259
Prasanna Rotti

Toutes les méthodes suivantes sont utiles:

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

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

Il est recommandé d'éviter DOMelement ou inline "this.checked" à la place de jQuery sur la méthode utilisée comme écouteur d'événement.

91
justnajm

code jQuery pour vérifier si la case à cocher est cochée ou non:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

Alternativement:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
78
Kundan roy

Le concept le plus important à retenir à propos de l'attribut vérifié est qu'il ne correspond pas à la propriété cochée. L'attribut correspond effectivement à la propriété defaultChecked et doit être utilisé uniquement pour définir la valeur initiale de la case à cocher. L'attribut vérifié la valeur ne change pas avec l'état de la case à cocher, alors que le propriété cochée fait. Par conséquent, la méthode compatible avec plusieurs navigateurs permet de déterminer si une case à cocher est cochée pour utiliser la propriété

Toutes les méthodes ci-dessous sont possibles

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked")
60
Techie

Vous pouvez utiliser ce code,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}
33
Mohammed Shaheen MK

Selon jQuery documentation , il existe différentes manières de vérifier si une case à cocher est cochée ou non. Considérons une case à cocher par exemple (Check Working jsfiddle avec tous les exemples)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Exemple 1 - Avec coché

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
});

Exemple 2 - Avec jQuery is, NOTE -: vérifié

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
});

Exemple 3 - Avec jQuery prop 

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
});

Check Working jsfiddle

26
Subodh Ghulaxe

Vous pouvez essayer ceci:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
26
Vishnu Sharma

Vous pouvez utiliser l’un des codes recommandés suivants par jquery.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
21
endur

Je sais que le PO veut jQuery, mais dans mon cas, JS pur était la solution, donc si quelqu'un comme moi est ici et n'a pas jQuery ou ne veut pas l'utiliser, voici la réponse de JS:

document.getElementById("myCheck").checked

Il renvoie true si l'entrée avec ID myCheck est cochée et false si elle n'est pas cochée.

Aussi simple que cela.

10
Combine

Vous pouvez le faire simplement comme;

Travailler Fiddle

HTML

<input id="checkbox" type="checkbox" />

jQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

ou même plus simple;

$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

Si la case checkbox est cochée, elle retournera true sinon undefined

10
Aamir Shahzad

Démo simple pour vérifier et définir une case à cocher.

jsfiddle !

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});
7
An Illusion

Pour case à cocher avec un identifiant

<input id="id_input_checkbox13" type="checkbox"></input>

vous pouvez simplement faire

$("#id_input_checkbox13").prop('checked')

vous obtiendrez true ou false comme valeur de retour pour la syntaxe ci-dessus. Vous pouvez l'utiliser dans la clause if comme expression booléenne normale.

5
Aniket Thakur

Juste pour dire dans mon exemple la situation était une boîte de dialogue qui a ensuite coché la case avant de fermer la boîte de dialogue. Aucune des réponses ci-dessus et Comment vérifier si une case à cocher est cochée dans jQuery? et jQuery si la case à cocher est cochée ne semblait pas fonctionner non plus.

À la fin 

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

Cela a fonctionné, appelant la classe puis l'identifiant. plutôt que juste l'ID. Cela peut être dû aux éléments DOM imbriqués sur cette page qui sont à l'origine du problème. La solution de contournement était ci-dessus.

5
Vahid

Basculer la case cochée

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
4
sourceboy

Quelque chose comme ça peut aider

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}
4
darhamid

En fait, selon jsperf.com , les opérations DOM sont les plus rapides, puis $ (). Prop () suivi de $ ().

Voici les syntaxes: 

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

Personnellement, je préfère .prop(). Contrairement à .is(), il peut également être utilisé pour définir la valeur.

4
BlackPanther

En utilisant ce code, vous pouvez cocher au moins une case à cocher ou non dans différents groupes de cases à cocher ou à partir de plusieurs cases à cocher . Pour utiliser cette option, vous ne pouvez pas exiger la suppression des ID ou des ID dynamiques. Ce code fonctionne avec les mêmes identifiants.

Référence Lien

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>
0
Parth Patel

Depuis la mi-2019, jQuery passe parfois à l'arrière-plan avec des choses comme VueJS, React etc. Voici une option d'écoute pur sur Javascript vanilla:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>
0
Grant