Vérifier si la case 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 renvoie toujours le nombre de cases à cocher indépendamment de l'id.

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

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

Les ID doivent être uniques dans votre document, ce qui signifie que vous ne devriez pas faire 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 conteneur:

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

$('#' + id).is(":checked")

Cela devient si la case est cochée.

Pour un tableau de cases à cocher portant le même nom, vous pouvez obtenir la liste des cases cochées en:

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

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

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

Pour savoir combien sont vérifiés, vous pouvez faire:

$boxes.length;

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

Le code ci-dessus renvoie vrai si la case est cochée ou faux sinon.

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, jQuery on method doit être utilisé comme écouteur d'événements.

Code jQuery pour vérifier si la case est cochée ou non:

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

Alternativement:

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

Le concept le plus important à retenir à propos de l'attribut vérifié est qu'il ne correspond pas à la propriété vérifiée. L'attribut correspond en fait à la propriété defaultChecked et ne doit être utilisé que pour définir la valeur initiale de la case à cocher. La valeur d'attribut vérifiée ne change pas avec l'état de la case à cocher, contrairement à la propriété vérifiée. Par conséquent, la façon compatible avec tous les navigateurs de déterminer si une case à cocher est cochée consiste à utiliser la propriété

Toutes les méthodes ci-dessous sont possibles

elem.checked 

$(elem).prop("checked") 

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

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

Selon la documentation de jQuery , il existe des façons suivantes de vérifier si une case à cocher est cochée ou non. Considérons par exemple une case à cocher (Cochez 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.");
    }
}); 

Vérifier le travail jsfiddle

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

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

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

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

document.getElementById("myCheck").checked

Elle renvoie vrai si l'entrée avec l'ID myCheck est vérifiée et false si elle n'est pas vérifiée.

Aussi simple que cela.

Vous pouvez le faire simplement comme;

Violon de travail

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 encore plus simple;

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

Si le checkboxest coché il reviendra truesinonundefined

C'est aussi une idée que j'utilise fréquemment:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

S'il est mâché, il renverra 1; sinon, il retournera 0.

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

Juste pour dire que dans mon exemple, la situation était une boîte de dialogue qui a ensuite vérifié la case à cocher 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 est cochée ne semble 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é donc appeler la classe puis l'ID. plutôt que juste l'ID. Cela peut être dû aux éléments DOM imbriqués sur cette page à l'origine du problème. La solution de contournement était ci-dessus.

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 trueou falsecomme valeur de retour pour la syntaxe ci-dessus. Vous pouvez l'utiliser dans la clause if comme expression booléenne normale.

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

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

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.

Activer la case à cocher

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

En utilisant ce code, vous pouvez vérifier qu'au moins une case à cocher est sélectionnée ou non dans différents groupes de cases à cocher ou à partir de plusieurs cases à cocher. En utilisant cela, vous ne pouvez pas exiger de supprimer les ID ou les ID dynamiques. Ce code fonctionne avec les mêmes ID.

Lien de référence

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

Depuis la mi-2019 et jQuery prend parfois un siège arrière à des choses comme VueJS, React etc. Voici une option d'écoute de chargement Javascript pure vanille:

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

Votre question n'est pas claire: vous voulez donner "ID de tableau de case à cocher" à l'entrée et obtenir true/falseà la sortie - de cette façon, vous ne saurez pas quelle case a été cochée (comme le suggère le nom de votre fonction). Donc, ci-dessous, il y a ma proposition de corps isCheckedByIdqui, à l'entrée, prend la case à cocher idet au retour de sortie true/false(c'est très simple mais votre ID ne doit pas être un mot-clé),

this[id].checked

function isCheckedById(id) {
  return this[id].checked;
}

function check() {
  console.clear()
  console.log('1',isCheckedById("myCheckbox1"));
  console.log('2',isCheckedById("myCheckbox2"));
  console.log('3',isCheckedById("myCheckbox3"));
}

<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>

utilisez le code ci-dessous

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>