valeur - verifier si un checkbox est coché jquery




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

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

La propriété checked d'un élément DOM à 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 la 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>

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 renvoie false par défaut:

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

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


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

Cela a fonctionné pour moi:

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

isAgeSelected est l'id du contrôle.

De plus, la answer @ karim79 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


Cela fonctionne pour moi:

/* isAgeSelected being id for checkbox */

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

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 jQuery.attr() 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")

Il y a 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'))

Voir exemple ou aussi documenter:


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 affectez à l'événement onchange la case à cocher une fonction qui vérifie si la case à cocher a bien été cochée et définit la propriété hidden du champ de texte d'âge de manière appropriée. Dans cet exemple, utilisez l'opérateur ternaire.

Voici un fiddle pour vous de le tester.

Addenda

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

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

Plus lent mais compatible avec tous les navigateurs.


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éfini. Vérifiez donc la valeur "TRUE".


Je crois que tu pourrais faire ça:

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

Je pense que ce sera le simple

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

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 fadeIn l'élément #saveForm, et sinon fadeOut l'élément saveForm.


Ma façon de faire est:

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

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
}

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


Utilisez la fonction is() de jQuery:

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

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>


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

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

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

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





checkbox