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

je dois vérifier la propriété checked d'une case à cocher et effectuer une action basée sur la propriété vérifiée en utilisant jQuery.

par exemple, si la case d'âge est cochée, alors je dois afficher une boîte de texte pour entrer l'âge, sinon masquer la boîte de texte.

mais le code suivant renvoie false par défaut:

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

Comment puis-je interroger avec succès la propriété checked ?

3989
demandé sur Prasad 2009-05-23 19:16:39
la source

30 ответов

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

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

étant donné votre code existant, vous pouvez donc faire ceci:

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

cependant, il y a 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>
3137
répondu karim79 2018-03-09 05:06:27
la source

utiliser is() fonction:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
1579
répondu Bhanu Krishnan 2012-08-23 07:42:16
la source

utilisant 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

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

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}
481
répondu SeanDowney 2011-06-23 21:29:18
la source

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 crédit va à Xian .

185
répondu ungalcrys 2017-05-23 15:26:29
la source

j'utilise ceci et cela fonctionne absolument bien:

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

Note: si la case à cocher est cochée, elle retournera true autrement non défini, donc mieux vaut vérifier la valeur "TRUE".

149
répondu Pradeep 2014-05-07 16:18:22
la source

utiliser:

<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
122
répondu Lalji Dhameliya 2018-06-15 10:16:33
la source

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 devriez 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")
108
répondu Salman A 2016-10-30 20:10:20
la source

cela a fonctionné pour moi:

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

isAgeSelected est le code d'identification de la commande.

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

Note, Cette réponse utilise Microsoft Ajax, pas jQuery

84
répondu Prasad 2017-05-23 15:34:51
la source

si vous utilisez une version mise à jour de jquery, vous devez choisir .prop méthode pour résoudre votre problème:

$('#isAgeSelected').prop('checked') retournera true si cochée et false si non cochée. Je l'ai confirmé et je suis tombé sur ce problème plus tôt. $('#isAgeSelected').attr('checked') et $('#isAgeSelected').is('checked') renvoie undefined ce qui n'est pas une réponse digne pour la situation. Alors faites comme donné ci-dessous.

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

Espère que cela aide :)- Merci.

81
répondu Rajesh Omanakuttan 2015-09-12 19:10:02
la source

utiliser le gestionnaire d'événements Click pour la propriété checkbox n'est pas fiable, car la propriété checked peut changer pendant l'exécution du gestionnaire d'événements lui-même!

Idéalement, vous devriez mettre votre code dans un gestionnaire d'événements change tel qu'il est activé chaque fois que la valeur de la case à cocher est changée (indépendamment de comment il est fait ainsi).

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

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
55
répondu arviman 2016-10-30 20:09:33
la source

j'ai décidé de poster une réponse sur la façon de faire exactement la même chose sans jQuery. Juste 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;
};

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

voici un violon pour vous tester.

Addendum

si la compatibilité entre navigateurs est un problème, je propose de définir la propriété CSS display à none et inline .

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

plus lent mais compatible avec les navigateurs croisés.

50
répondu Octavian Damiean 2012-04-05 19:50:25
la source

je crois que vous pourriez faire ceci:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
40
répondu xenon 2009-05-23 19:34:24
la source

il y a plusieurs façons de vérifier si une case à cocher 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'))

exemple de contrôle ou aussi document:

39
répondu Parth Chavda 2016-10-30 20:30:42
la source

j'ai couru au même numéro. J'ai une ASP.NET case à cocher

<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 à cocher était cochée ou non, et il semble fonctionner comme un charme.

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

je suis sûr que vous pouvez également utiliser L'ID à la place de la CssClass,

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

j'espère que cela vous aide.

38
répondu Nertim 2011-05-25 14:59:04
la source

ça marche pour moi:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
36
répondu ashish amatya 2016-10-30 20:08:46
la source

C'est 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>
33
répondu Sangeet Shah 2016-10-30 20:34:28
la source

utilisez ceci:

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

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

32
répondu Hamid N K 2017-01-16 11:51:06
la source

vous pouvez utiliser ce code:

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
31
répondu sandeep kumar 2016-10-30 20:36:57
la source
$(selector).attr('checked') !== undefined

retourne true si l'entrée est activée et false si elle ne l'est pas.

30
répondu fe_lix_ 2013-03-21 15:13:00
la source
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
30
répondu Jumper Pot 2014-11-26 18:07:01
la source

ma façon de faire ceci est:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
30
répondu Dalius I 2015-04-06 23:52:33
la source

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.

28
répondu Muhammad Awais 2016-09-21 18:21:33
la source

cet exemple est pour button.

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);
    }
});
});
24
répondu usayee 2016-06-02 17:17:27
la source

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

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

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

en gros, lorsque l'élément #li_13 est cliqué, il vérifie si l'élément # agree (qui est la case à cocher) est coché en utilisant la fonction .attr('checked') . Si elle est alors fadeIn l'élément #saveForm, et si elle n'est pas fadeOut l'élément saveForm.

23
répondu BigHomie 2016-10-30 20:12:04
la source

1) si votre balisage HTML est:

<input type="checkbox"  />

attr:

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

si prop est utilisé:

$(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:

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

Prop:

$(element).prop("checked") // Will return true whether checked="checked"
23
répondu Somnath Kharat 2016-10-30 20:25:33
la source

bascule: 0/1 or else

<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');
    };
});
21
répondu user2385302 2015-05-05 11:48:08
la source

j'utilise ceci:

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

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
19
répondu Nishant 2016-10-30 20:22:27
la source

bien que vous ayez proposé une solution JavaScript pour votre problème (affichant un textbox quand un checkbox est checked ), ce problème pourrait être résolu juste par css . Avec cette approche, votre formulaire fonctionne pour les utilisateurs qui ont désactivé JavaScript.

en supposant que vous avez le HTML suivant:

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

vous pouvez utiliser les CSS suivants pour obtenir la fonctionnalité désiré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 .

19
répondu Ormoz 2016-10-30 20:32:58
la source
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

ou

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}
16
répondu ijarlax 2013-06-10 17:12:59
la source

je pense que ça va être le simple

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
15
répondu Jitendra Damor 2015-06-04 08:07:16
la source

Autres questions sur jquery dom html checkbox