Je voudrais faire quelque chose comme ça pour cocher un checkbox
en utilisant jQuery :
$(".myCheckBox").checked(true);
Ou
$(".myCheckBox").selected(true);
Une telle chose existe-t-elle?
30 réponses
JQuery moderne
Utilisez .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
API DOM
Si vous travaillez avec un seul élément, vous pouvez toujours accéder au {{ X0}} et modifiez son .checked
propriété:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
L'avantage d'utiliser les méthodes .prop()
et .attr()
au lieu de cela est qu'elles fonctionneront sur tous les éléments correspondants.
JQuery 1.5.x et inférieur
La méthode .prop()
n'est pas disponible, vous devez donc utiliser .attr()
.
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Notez qu'il s'agit de l'approche utilisée par les tests unitaires de jQuery avant la version 1.6 et est préférable à l'utilisation de $('.myCheckbox').removeAttr('checked');
car cette dernière, si la case a été initialement cochée, changera le comportement d'un appel en .reset()
sur n'importe quel formulaire qui le contient - un changement de comportement subtil mais probablement indésirable.
Pour plus de contexte, une discussion incomplète des modifications apportées à la gestion de l'attribut / propriété checked
dans la transition de 1.5.x à 1.6 peut être trouvée dans le notes de publication de la version 1.6 et la section Attributs vs. Propriétés de la section .prop()
documentation.
C'est probablement la solution la plus courte et la plus simple:
$(".myCheckBox")[0].checked = true;
Ou
$(".myCheckBox")[0].checked = false;
Encore plus court serait:
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
Voici également un jsFiddle .
Je manque la solution. J'utiliserai toujours:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
Lorsque vous avez coché une case comme;
$('.className').attr('checked', 'checked')
Cela pourrait ne pas suffire. Vous devez également appeler la fonction ci-dessous;
$('.className').prop('checked', 'true')
Surtout lorsque vous avez supprimé l'attribut checkbox.
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
Une autre solution possible:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
Essaye ça:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
Tu peux faire
$('.myCheckbox').attr('checked',true) //Standards compliant
Ou
$("form #mycheckbox").attr('checked', true)
Si vous avez du code personnalisé dans l'événement onclick pour la case à cocher que vous souhaitez déclencher, utilisez celui-ci à la place:
$("#mycheckbox").click();
Vous pouvez décocher en supprimant entièrement l'attribut:
$('.myCheckbox').removeAttr('checked')
Vous pouvez cocher toutes les cases comme ceci:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
Ceci sélectionne les éléments qui ont l'attribut spécifié avec une valeur contenant la sous-chaîne donnée "ckbItem":
$('input[name *= ckbItem]').prop('checked', true);
Il sélectionnera tous les éléments qui contiennent ckbItem dans son attribut de nom.
Voici le code pour coché et décoché avec un bouton:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
});
set=unset;
});
});
Mise à jour: Voici le même bloc de code utilisant la nouvelle méthode prop Jquery 1.6+, qui remplace attr:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
});
set=unset;
});
});
Si vous utilisez PhoneGap pour le développement d'applications et que vous avez une valeur sur le bouton que vous souhaitez afficher instantanément, n'oubliez pas de fais ça
$('span.ui-[controlname]',$('[id]')).text("the value");
J'ai trouvé que sans la durée, l'interface ne sera pas mise à jour, quoi que vous fassiez.
Pour cocher et décocher
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Dans jQuery,
if($("#checkboxId").is(':checked')){
alert("Checked");
}
Ou
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
En JavaScript,
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
Le JavaScript simple est très simple et beaucoup moins de frais généraux:
var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}
Voici la réponse complète en utilisant jQuery
Je le teste et ça marche à 100%: D
// when the button (select_unit_button) is clicked it returns all the checed checkboxes values
$("#select_unit_button").on("click", function(e){
var arr = [];
$(':checkbox:checked').each(function(i){
arr[i] = $(this).val(); // u can get id or anything else
});
//console.log(arr); // u can test it using this in google chrome
});
Je n'ai pas pu le faire fonctionner en utilisant:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
Vrai et faux cocheraient la case. Ce qui a fonctionné pour moi, c'est:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
Voici un moyen de le faire sans jQuery
function addOrAttachListener(el, type, listener, useCapture) {
if (el.addEventListener) {
el.addEventListener(type, listener, useCapture);
} else if (el.attachEvent) {
el.attachEvent("on" + type, listener);
}
};
addOrAttachListener(window, "load", function() {
var cbElem = document.getElementById("cb");
var rcbElem = document.getElementById("rcb");
addOrAttachListener(cbElem, "click", function() {
rcbElem.checked = cbElem.checked;
}, false);
}, false);
<label>Click Me!
<input id="cb" type="checkbox" />
</label>
<label>Reflection:
<input id="rcb" type="checkbox" />
</label>
Comme l'a dit @ livefree75:
jQuery 1.5.x et versions antérieures
Vous pouvez également étendre l'objet $ .fn avec de nouvelles méthodes:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
Mais dans les nouvelles versions de jQuery, nous devons utiliser quelque chose comme ceci:
jQuery 1.6+
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").prop("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").prop("checked",false);
}
});
}(jQuery));
Ensuite, vous pouvez simplement faire:
$(":checkbox").check();
$(":checkbox").uncheck();
Soyez conscient des fuites de mémoire dans Internet Explorer avant Internet Explorer 9, comme La documentation jQuery indique:
Dans Internet Explorer avant la version 9, l'utilisation de .prop () pour définir une propriété d'élément DOM sur autre chose qu'une simple valeur primitive (nombre, chaîne ou booléen) peut provoquer des fuites de mémoire si la propriété n'est pas supprimée (à l'aide de .removeProp ( )) avant que l'élément DOM ne soit supprimé du document. Pour définir en toute sécurité des valeurs sur des objets DOM sans fuite de mémoire, utilisez .data ().
Voici le code et la démo pour savoir comment cocher plusieurs cases à cocher ...
http://jsfiddle.net/tamilmani/z8TTt/
$("#check").on("click", function () {
var chk = document.getElementById('check').checked;
var arr = document.getElementsByTagName("input");
if (chk) {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = true;
}
} else {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = false;
}
}
});
C'est la bonne façon de cocher et de décocher les cases à cocher avec jQuery, car c'est une norme multiplateforme, et permettra d'autoriser les reposts de formulaire.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
En faisant cela, vous utilisez les normes JavaScript pour cocher et décocher les cases à cocher, donc tout navigateur qui implémente correctement la propriété "vérifié" de l'élément checkbox exécutera ce code sans problème. Ce devrait être tous les principaux navigateurs, mais je ne peux pas tester avant Internet Explorer 9.
Le problème (jQuery 1.6):
Une fois qu'un utilisateur clique sur une case à cocher, cette case à cocher cesse de répondre aux modifications d'attribut "vérifié".
Voici un exemple de l'attribut de case à cocher qui ne fait pas le travail après que quelqu'un a cliqué sur la case à cocher (cela se produit dans Chrome).
La solution:
En utilisant la propriété "vérifiée" de JavaScript sur les éléments DOM, nous sommes en mesure de résoudre le problème directement, au lieu d'essayer de manipuler le DOM à faire ce que nous voulons qu'il fasse.
Ce plugin va modifier la propriété vérifiée de tous les éléments sélectionnés par jQuery, et cocher et décocher avec succès les cases à cocher en toutes circonstances. Ainsi, bien que cela puisse sembler une solution excessive, cela améliorera l'expérience utilisateur de votre site et aidera à éviter la frustration des utilisateurs.
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery );
Alternativement, si vous ne souhaitez pas utiliser de plug-in, vous pouvez utiliser les extraits de code suivants:
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});
Nous pouvons utiliser elementObject
avec jQuery pour faire vérifier l'attribut:
$(objectElement).attr('checked');
Nous pouvons l'utiliser pour toutes les versions de jQuery sans aucune erreur.
Mise à jour: Jquery 1.6+ a la nouvelle méthode prop qui remplace attr, par exemple:
$(objectElement).prop('checked');
Pour jQuery 1.6+
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Pour jQuery 1.5.x et inférieur
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Vérifier,
$('.myCheckbox').removeAttr('checked');
En supposant que la question est ...
Comment puis-je vérifier un ensemble de cases à cocher PAR VALEUR?
N'oubliez pas que dans un ensemble de cases à cocher typique, toutes les balises d'entrée ont le même nom, elles diffèrent par l'attribut value
: il n'y a pas d'ID pour chaque entrée de l'ensemble.
La réponse de Xian peut être étendue avec un sélecteur plus spécifique , en utilisant la ligne de code suivante:
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
Utilisation:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
Et si vous voulez vérifier si une case est cochée ou non:
$('.myCheckbox').is(':checked');
Pour cocher une case, vous devez utiliser
$('.myCheckbox').attr('checked',true);
Ou
$('.myCheckbox').attr('checked','checked');
Et pour décocher une case, vous devez toujours la définir sur false:
$('.myCheckbox').attr('checked',false);
Si tu fais
$('.myCheckbox').removeAttr('checked')
Il supprime l'attribut tous ensemble et donc vous ne pourrez pas réinitialiser le formulaire.
BAD DEMO jQuery 1.6. Je pense que c'est cassé. Pour 1.6, je vais faire un nouveau post à ce sujet.
NOUVELLE DÉMO DE TRAVAIL jQuery 1.5.2 fonctionne dans Chrome.
Les deux démos utilisent
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
Si vous utilisez mobile et que vous souhaitez que l'interface se mette à jour et affiche la case à cocher comme décochée, utilisez ce qui suit:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Pour cocher une case à l'aide de jQuery 1.6 ou version ultérieure, procédez comme suit:
checkbox.prop('checked', true);
Pour décocher, utilisez:
checkbox.prop('checked', false);
Voici ce que j'aime utiliser pour basculer une case à cocher à l'aide de jQuery:
checkbox.prop('checked', !checkbox.prop('checked'));
Si vous utilisez jQuery 1.5 ou une version antérieure:
checkbox.attr('checked', true);
Pour décocher, utilisez:
checkbox.attr('checked', false);
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
Le dernier déclenchera l'événement de clic pour la case à cocher, les autres ne le feront pas. Donc, si vous avez du code personnalisé dans l'événement onclick pour la case à cocher que vous souhaitez déclencher, utilisez la dernière.
Vous pouvez également étendre l'objet $ .fn avec de nouvelles méthodes:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
Ensuite, vous pouvez simplement faire:
$(":checkbox").check();
$(":checkbox").uncheck();
Ou vous pouvez leur donner des noms plus uniques comme mycheck () et myuncheck () dans le cas où vous utilisez une autre bibliothèque qui utilise ces noms.
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.