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

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>

utiliser is() fonction:

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

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
}

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 .

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

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

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

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.

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

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.

je crois que vous pourriez faire ceci:

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

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:

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

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

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.

ça marche pour moi:

/* isAgeSelected being id for checkbox */

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

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>

utilisez ceci:

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

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

vous pouvez utiliser ce code:

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

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

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

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

ma façon de faire ceci est:

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

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.

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

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.

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"

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

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

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

ou

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

je pense que ça va être le simple

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