it-swarm-fr.com

Comment vérifier si une case à cocher 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é cochée à l'aide de jQuery.

Par exemple, si la case Age est cochée, je dois alors afficher une zone de texte pour saisir l'âge, sinon masquer la zone de texte.

Mais le code suivant retourne false par 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 propriété checked?

4308
Prasad

Cela a fonctionné pour moi:

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

isAgeSelected est l'id du contrôle.

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

Notez que cette réponse utilise Microsoft Ajax, pas jQuery

92
Prasad

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

La propriété checked d'un élément DOM à case à cocher vous donnera l'état checked 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 un moyen beaucoup plus joli 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>
3311
karim79

Utilisez la fonction is () de jQuery:

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

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
}
530
SeanDowney

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 .

214
ungalcrys

J'utilise ceci et cela fonctionne absolument bien:

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

Remarque: Si la case à cocher est cochée, la valeur true sera renvoyée, sinon indéfinie. Vérifiez donc la valeur "TRUE".

160
Pradeep

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
141
Lalji Dhameliya

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é par 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")
114
Salman A

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

$('#isAgeSelected').prop('checked') retournera true si coché et false s'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') renvoie undefined, ce qui n'est pas une réponse digne de la situation. Alors faites comme indiqué ci-dessous.

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

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

84
Rajesh Omanakuttan

L'utilisation du gestionnaire d'événements Click pour la propriété de case à cocher 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 voudriez placer votre code dans un gestionnaire d’événements change tel qu’il soit déclenché chaque fois que la valeur de la case à cocher est modifiée (indépendamment de comment c’est fait ainsi).

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

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

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

55
UDB

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

D'abord, vous obtenez les deux éléments par leur ID. Ensuite, vous attribuez à l'événement onchange de la case à cocher une fonction qui vérifie si la case est cochée et définit correctement la propriété hidden du champ de saisie de l'âge. Dans cet exemple, utilisez l'opérateur ternaire.

Voici un violon pour vous permettre de le tester.

Addendum

Si la compatibilité entre navigateurs pose problème, je propose de définir la propriété CSS display sur none et inline .

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

Plus lent mais compatible avec tous les navigateurs.

51
Octavian Damiean

Je crois que tu pourrais faire ça:

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

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

Voir exemple ou aussi documenter:

43
Parth Chavda

J'ai couru dans 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’utilisais le sélecteur suivant pour vérifier si la case à cocher é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 du CssClass,

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

J'espère que ceci vous aide.

43
Nertim

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>
41
Sangeet Shah

Cela fonctionne pour moi:

/* isAgeSelected being id for checkbox */

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

Utilisez ceci:

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

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

35
Hamid N K

Vous pouvez utiliser ce code:

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

Ma façon de faire est:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
32
Dalius I
$(selector).attr('checked') !== undefined

Ceci retourne true si l'entrée est cochée et false si ce n'est pas le cas.

31
fe_lix_

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.

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

1) Si votre balise HTML est:

<input type="checkbox"  />

attr utilisé:

$(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 balise 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"
26
Somnath Kharat

Cet exemple est pour 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);
    }
});
});
24
usayee

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 # accord (qui est la case à cocher) est coché à l'aide de la fonction .attr('checked'). Si c'est le cas, alors fadeIn l'élément #saveForm et sinon fadeOut l'élément saveForm.

24
MDMoore313

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 uniquement par css . Avec cette approche, votre formulaire fonctionne pour les utilisateurs qui ont désactivé JavaScript.

En supposant que vous ayez le 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 Fiddle pour démontrer cette approche .

22
Ormoz

J'utilise ceci:

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

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

Basculer: 0/1 ou sinon

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

Je pense que ce sera le simple

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

Je suis sûr que ce n'est pas une révélation, mais je n'ai pas tout vu dans un exemple:

Sélecteur pour toutes les cases à cocher cochées (sur la page):

$('input[type=checkbox]:checked')
18
Tsonev

Incluez jQuery à partir du système de fichiers local. J'ai utilisé le CDN de Google, et il existe également de nombreux CDN parmi lesquels choisir.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Le code s'exécutera dès que la case à cocher de la classe mycheck sera cliquée. Si la case à cocher sur laquelle vous avez cliqué est cochée, toutes les autres et toutes les autres seront activées. Si la case actuelle est décochée, toutes les cases à cocher seront à nouveau activées pour une nouvelle vérification.

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

        var checkbox_selector = '.mycheck input[type=checkbox]';

        $(checkbox_selector).click(function() {
            if ($($(this)).is(':checked')) {

                // Disable all checkboxes
                $(checkbox_selector).attr('disabled', 'disabled');

                // Enable current one
                $($(this)).removeAttr('disabled');
            }
            else {
                // If unchecked open all checkbox
                $(checkbox_selector).removeAttr('disabled');
            }
        });
    });
</script>

Forme simple à tester

<form method="post" action="">
    <div class="mycheck">
        <input type="checkbox" value="1" /> Television
        <input type="checkbox" value="2" /> Computer
        <input type="checkbox" value="3" /> Laptop
        <input type="checkbox" value="4" /> Camera
        <input type="checkbox" value="5" /> Music Systems
    </div>
</form>

Écran de sortie:

Enter image description here

17
Madan Sapkota
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

ou

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}
17
ijarlax

L'attribut checked d'un input type="checkbox" est mappé avec la propriété defaultChecked, not avec la propriété checked.

Ainsi, lorsque vous faites quelque chose dans une page quand une case à cocher est décochée, utilisez plutôt la méthode prop(). Il récupère la valeur de la propriété et change lorsque l'état de la case à cocher change.

Utiliser attr() ou getAttribute (en JavaScript pur) dans ces cas-là n'est pas la bonne façon de faire les choses.

si elem est la case à cocher concernée, procédez comme suit pour extraire la valeur:

elem.checked

ou

$(elem).prop('checked')
15
subham.saha1004

J'ai vérifié dans Firefox 9.0.1 que ce qui suit permet d'attraper l'état d'un changement de case à cocher:

$("#mycheckbox").change(function() {
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
});
15
Joshua Harris

Automatique

$(document).ready(function()
{
    $('#isAgeSelected').change(function()
    {
        alert( 'value =' + $('#chkSelect').attr('checked') );
    });
});

HTML

<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>

<br/><br/>

<input type="button" id="btnCheck" value="check" />

jQuery

$(document).ready(function()
{
    $('#btnCheck').click(function()
    {
        var isChecked = $('#isAgeSelected').attr('checked');

        if (isChecked == 'checked')
            alert('check-box is checked');
        else
            alert('check-box is not checked');
    })
});

Ajax

function check()
{
    if (isAgeSelected())
        alert('check-box is checked');
    else
        alert('check-box is not checked');
}

function isAgeSelected()
{
    return ($get("isAgeSelected").checked == true);
}
14
Khaled.K

C’est la quantité minimale de code pour laquelle je pense avoir besoin de faire quelque chose comme cela de manière efficace. J'ai trouvé cette méthode utile. il retourne un tableau des cases à cocher qui sont cochées et vous pouvez ensuite utiliser leur valeur (cette solution utilise jQuery):

// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
    alert('Please select check boxes');
    return false;
};

// And this is how you use them:
checkedBoxes.each(function() {
    output +=  this.value + ", ";
};

L'impression "sortie" vous donnera une liste de vos valeurs, séparées par des virgules.

13
Daryl H

J'avais le même problème et aucune des solutions publiées ne semblait fonctionner. J'ai ensuite découvert que c'était parce qu'ASP.NET rend le contrôle CheckBox sous forme de SPAN avec INPUT à l'intérieur. L'ID CheckBox est donc l'ID d'un SPAN, une entrée, vous devriez donc utiliser:

$('#isAgeSelected input')

plutôt que

$('#isAgeSelected')

et alors toutes les méthodes énumérées ci-dessus devraient fonctionner.

12
tsw_mik

Voici un exemple qui inclut initialisation l'affichage/masquage pour correspondre à l'état de la case à cocher lorsque la page se charge; en tenant compte du fait que firefox se souvient de l'état des cases à cocher lorsque vous actualisez la page, mais ne le fera pas mémoriser l'état des éléments montrés/cachés.

$(function() {
    // initialise visibility when page is loaded
    $('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
    // attach click handler to checkbox
    $('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});

(avec l'aide d'autres réponses à cette question)

12
Tim Abell

Il suffit de l'utiliser comme ci-dessous

 $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });
11
Himanshu Upadhyay

C'était ma solution de contournement:

$('#vcGoButton').click(function () {
    var buttonStatus = $('#vcChangeLocation').prop('checked');
    console.log("Status is " + buttonStatus);
    if (buttonStatus) {
        var address = $('#vcNewLocation').val();
        var cabNumber = $('#vcVehicleNumber').val();
        $.get('postCabLocation.php',
              {address: address, cabNumber: cabNumber},
              function(data) {
                  console.log("Changed vehicle " + cabNumber + " location to " + address );
              });
    }
    else {
        console.log("VC go button clicked, but no location action");
    }
});
10
cauleyfj

Utilisation:

$(this).toggle($("input:checkbox", $(this))[0].checked);

Lorsque vous sélectionnez hors contexte, rappelez-vous que vous avez besoin de [0] pour accéder à la case à cocher.

9
Richard Maxwell

Utiliser pure JavaScript:

let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}
9
Abraham Hernandez

Setter:

$("#chkmyElement")[0].checked = true;

Getter:

if($("#chkmyElement")[0].checked) {
   alert("enabled");
} else {
   alert("disabled");
}
9
JJ_Coder4Hire

En fait, je préférerais l'événement change.

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

violon de démonstration

8
Tarion

S'il vous plaît essayer ci-dessous le code pour vérifier la case à cocher est cochée ou non

$(document).ready(function(){

    $("#isAgeSelected").on('change',function(){

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

   });

});
8
Javed Khan

Essaye ça,

$('#isAgeSelected').click(function() {
    if(this.checked){
        $("#txtAge").show();
    } else{
        $("#txtAge").hide();
    } 
});
8
Mohammed Safeer

J'utilise jQuery 1.11.1 et j'ai également eu des problèmes pour définir et lire la valeur de la case à cocher.

Je l'ai finalement résolu par ces deux fonctions:

function setCheckboxValue(checkBoxId, checked) {
    if (checkBoxId && (checked === true || checked === false)) {
        var elem = $('#' + checkBoxId);
        if (checked === true) {
            elem.attr('checked', 'checked');
        } else {
            elem.removeAttr('checked');
        }
    }
}

function isChecked(checkBoxId) {
    return $('#' + checkBoxId).attr('checked') != null;
}

Cela peut paraître un peu sale, mais cela résout tous les problèmes que j'ai rencontrés entre différents types de navigateurs.

7
Jacob

Un sélecteur renvoie plusieurs objets, et il doit prendre le premier élément du tableau:

// Collection
var chckremember = $("#chckremember");


// Result boolen
var ischecked=chckremember[0].checked;
7
zamoldar
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
6
user1996628

Vous pouvez essayer ce code:

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

Qu'en est-il de cette solution?

$("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();
4
Iter Ator

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

E.X -

1) Exécuter En charge pour obtenir la valeur de la case à cocher si la case Âge est cochée, puis je dois afficher une zone de texte pour entrer l’âge, sinon masquer la zone de texte.

2) si la case à cocher age est cochée, je dois alors afficher une zone de texte pour saisir l'âge, sinon masquer la zone de texte à l'aide de l'événement de clic de la case à cocher.

donc le code ne retourne pas faux par défaut:

Essayez ce qui suit:

<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <h1>Jquery Demo</h1>
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
            <div id="Age" style="display:none">
              <label>Enter your age</label>
              <input type="number" name="age">
            </div>
            <script type="text/javascript">
            if(document.getElementById('isAge').checked) {
                $('#Age').show();
            } else {
                $('#Age').hide();
            }   
            $('#isAge').click(function() {
                if(document.getElementById('isAge').checked) {
                    $('#Age').show();
                } else {
                    $('#Age').hide();
                }
            }); 
            </script>
        </body>
    </html>

Voici une version modifiée: https://jsfiddle.net/sedhal/0hygLtrz/7/

3
sedhal soni

Si vous avez besoin de savoir si une case à cocher est cochée uniquement javascript, vous devez utiliser ce code.

let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
    alert("element is checked");
} else {
    alert("element is  ot checked");
}
2
Ir Calif

Pour les anciennes versions de jQuery, je devais utiliser ce qui suit,

$('#change_plan').live('click', function() {
     var checked = $('#change_plan').attr('checked');
     if(checked) {
          //Code       
     }
     else {
          //Code       
     }
});
2
Vajira Lasantha
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
2
darhamid
$('#chk').change(function() { 
    (this.checked)? alert('true') : alert('false');
});



($('#chk')[0].checked)? alert('true') : alert('false');
1
argie cruz

Si vous devez utiliser une classe CSS comme sélecteur jQuery, vous pouvez procéder comme suit:

$(document).ready(function () {
        $('.myOptionCheckbox').change(function () {            
            if ($(this).prop('checked') == true) {
                console.log("checked");           
            }
            else {
                console.log("unchecked");                
            }
        });
    });

Cela fonctionne bien pour checkboxes et radioboxes également.

1
Developer

Cette fonction est alternative et stable:

$('#isAgeSelected').context.checked
(return True/False)

Exemple:

if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
    /*.....*/
}else{
    /*.....*/
}
1
Ferhat KOÇER

En js pur, la case à cocher est plus lisible

isAgeSelected.checked
function check() {
  txtAge.style.display= isAgeSelected.checked ? 'block':'none';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<button onclick="check()">Check</button>

<div id="txtAge" style="display:none">
Age is selected
</div>
0
Kamil Kiełczewski
if($('#isAgeSelected').prop('checked')) {
    // do your action 
}
0
Vikash