Comment vérifier si une case à cocher est cochée dans jQuery?

Je dois vérifier la checkedpropriété d'une case à cocher et effectuer une action basée sur la propriété vérifiée à l'aide de jQuery.

Par exemple, si la case à cocher Âge est cochée, je dois afficher une zone de texte pour entrer l'âge, sinon masquer la zone de texte.

Mais le code suivant retourne falsepar défaut:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div id="txtAge" style="display:none">
Age is selected
</div>

Comment interroger avec succès la checkedpropriété?

Comment interroger avec succès la propriété vérifiée?

La checkedpropriété d'un élément DOM de case à cocher vous donnera l' checkedétat de l'élément.

Compte tenu de votre code existant, vous pouvez donc faire ceci:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Cependant, il existe une façon beaucoup plus jolie de le faire, en utilisant toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Utilisez la fonction is () de jQuery :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

Utilisation de jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

En utilisant la nouvelle méthode de propriété:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

jQuery 1.6+

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

jQuery 1.5 et inférieur

$('#isAgeSelected').attr('checked')

Toute version de jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Tout le mérite revient à Xian .

J'utilise ceci et cela fonctionne très bien:

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

Remarque: Si la case est cochée, elle renverra true sinon indéfini, il vaut donc mieux vérifier la valeur "TRUE".

Utilisation:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Depuis jQuery 1.6, le comportement de jQuery.attr()a changé et les utilisateurs sont encouragés à ne pas l'utiliser pour récupérer l'état vérifié d'un élément. Au lieu de cela, vous devez utiliser jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Deux autres possibilités sont:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Cela a fonctionné pour moi:

$get("isAgeSelected ").checked == true

Où isAgeSelectedest l'id du contrôle.

De plus, la réponse de @ karim79 fonctionne très bien. Je ne suis pas sûr de ce que j'ai manqué au moment où je l'ai testé.

Remarque, cette réponse utilise Microsoft Ajax, pas jQuery

Si vous utilisez une version mise à jour de jquery, vous devez rechercher une .propméthode pour résoudre votre problème:

$('#isAgeSelected').prop('checked')reviendra trues'il est coché et falses'il n'est pas coché . Je l'ai confirmé et je suis tombé sur ce problème plus tôt. $('#isAgeSelected').attr('checked')et $('#isAgeSelected').is('checked')revient undefinedce qui n'est pas une réponse digne de la situation. Faites comme indiqué ci-dessous.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

J'espère que ça aide:) - Merci.

L'utilisation du Clickgestionnaire d'événements pour la propriété de case à cocher n'est pas fiable, car la checkedpropriété peut changer pendant l'exécution du gestionnaire d'événements lui-même!

Idéalement, vous voudriez mettre votre code dans un changegestionnaire d'événements tel qu'il est déclenché chaque fois que la valeur de la case à cocher est modifiée (indépendamment de la façon dont cela est fait).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});

Utilisation:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Cela peut être utile si vous souhaitez que l'action requise ne soit effectuée que lorsque vous cochez la case, pas au moment où vous supprimez la coche.

J'ai décidé de poster une réponse sur la façon de faire exactement la même chose sans jQuery. Tout simplement parce que je suis un rebelle.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Vous obtenez d'abord les deux éléments par leur ID. Ensuite, vous affectez à l' onchangeévénement de la case à cocher une fonction qui vérifie si la case à cocher a été cochée et définit la hiddenpropriété du champ de texte d'âge de manière appropriée. Dans cet exemple, en utilisant l'opérateur ternaire.

Voici un violon pour le tester.

Addenda

Si la compatibilité entre les navigateurs est un problème, je propose de définir la displaypropriété CSS sur none et inline .

elem.style.display = this.checked ? 'inline' : 'none';

Plus lent mais compatible avec tous les navigateurs.

Je pense que vous pourriez faire ceci:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

J'ai rencontré exactement le même problème. J'ai une case à cocher ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

Dans le code jQuery, j'ai utilisé le sélecteur suivant pour vérifier si la case était cochée ou non, et cela semble fonctionner comme un charme.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Je suis sûr que vous pouvez également utiliser l'ID au lieu de la classe Css,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

J'espère que ceci vous aide.

Il existe plusieurs façons de vérifier si une case est cochée ou non:

Façon de vérifier en utilisant jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Vérifiez l'exemple ou documentez également:

• http://api.jquery.com/attr/

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

Ce code vous aidera

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

Cela fonctionne pour moi:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

Voici une méthode différente pour faire la même chose:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Utilisez ceci:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

La longueur est supérieure à zéro si la case est cochée.

Ma façon de procéder est la suivante:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

Cela retourne truesi l'entrée est vérifiée et falsesi ce n'est pas le cas.

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

Vous pouvez utiliser:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

Les deux devraient fonctionner.

1) Si votre balisage HTML est:

<input type="checkbox"  />

attr utilisé:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Si l'hélice est utilisée:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Si votre balisage HTML est:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr utilisé:

$(element).attr("checked") // Will return checked whether it is checked="true"

Prop utilisé:

$(element).prop("checked") // Will return true whether checked="checked"

Cet exemple concerne le bouton.

Essayez ce qui suit:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

La meilleure réponse ne l'a pas fait pour moi. Cela a cependant:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

Fondamentalement, lorsque l'élément # li_13 est cliqué, il vérifie si l'élément # d'accord (qui est la case à cocher) est vérifié en utilisant la .attr('checked')fonction. S'il l'est, alors fadeIn l'élément #saveForm, et sinon fadeOut, l'élément saveForm.

J'utilise ceci:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

Bien que vous ayez proposé une solution JavaScript pour votre problème (affichant un textboxquand un checkboxest checked), ce problème pourrait être résolu simplement par css . Avec cette approche, votre formulaire fonctionne pour les utilisateurs qui ont désactivé JavaScript.

En supposant que vous disposez du code HTML suivant:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Vous pouvez utiliser le CSS suivant pour obtenir la fonctionnalité souhaitée:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Pour d'autres scénarios, vous pouvez penser à des sélecteurs CSS appropriés.

Voici un violon pour démontrer cette approche .

Basculer: 0/1 ou autre

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

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});

Je pense que ce sera simple

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});