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?
Cela a fonctionné pour moi:
$get("isAgeSelected ").checked == true
Où 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
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>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 crédit va à Xian .
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".
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"> PlannedDepuis 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")
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.
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();
});
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.
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.
Je crois que tu pourrais faire ça:
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'))
Voir exemple ou aussi documenter:
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.
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>Cela fonctionne pour moi:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
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.
Vous pouvez utiliser ce code:
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Ma façon de faire est:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}
$(selector).attr('checked') !== undefined
Ceci retourne true si l'entrée est cochée et false si ce n'est pas le cas.
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.
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
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"
Cet exemple est pour le bouton.
Essayez ce qui suit:
<input type="button" class="check" id="checkall" value="Check All" /> <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 # 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.
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.
J'utilise ceci:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
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');
};
});
Je pense que ce sera le simple
$('#isAgeSelected').change(function() {
if($(this).is(":checked")) {
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
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')
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:
if($("#checkkBoxId").is(':checked')){
alert("Checked=true");
}
ou
if($("#checkkBoxId").attr('checked') == true){
alert("checked=true");
}
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')
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);
});
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);
}
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.
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.
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)
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();
}
});
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");
}
});
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.
Utiliser pure JavaScript:
let checkbox = document.getElementById('checkboxID');
if(checkbox.checked) {
alert('is checked');
} else {
alert('not checked yet');
}
Setter:
$("#chkmyElement")[0].checked = true;
Getter:
if($("#chkmyElement")[0].checked) {
alert("enabled");
} else {
alert("disabled");
}
En fait, je préférerais l'événement change.
$('#isAgeSelected').change(function() {
$("#txtAge").toggle(this.checked);
});
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
}
});
});
Essaye ça,
$('#isAgeSelected').click(function() {
if(this.checked){
$("#txtAge").show();
} else{
$("#txtAge").hide();
}
});
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.
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;
if( undefined == $('#isAgeSelected').attr('checked') ) {
$("#txtAge").hide();
} else {
$("#txtAge").show();
}
Vous pouvez essayer ce code:
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Qu'en est-il de cette solution?
$("#txtAge")[
$("#isAgeSelected").is(':checked') ?
'show' :
'hide'
]();
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/
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");
}
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
}
});
if( undefined == $('#isAgeSelected').attr('checked') ) {
$("#txtAge").hide();
} else {
$("#txtAge").show();
}
$('#chk').change(function() {
(this.checked)? alert('true') : alert('false');
});
($('#chk')[0].checked)? alert('true') : alert('false');
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.
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{
/*.....*/
}
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>if($('#isAgeSelected').prop('checked')) {
// do your action
}