Mettre "coché" pour une case à cocher avec jQuery?
30 réponses
jQuery 1.6+
utiliser la nouvelle .prop()
méthode:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
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 essais unitaires de jQuery avant la version 1.6 et est préférable à l'utilisation
$('.myCheckbox').removeAttr('checked');
puisque ce dernier va, si la case a été cochée initialement, changer le comportement d'un appel à .reset()
sur toute forme qui le contient - un changement de comportement subtil mais probablement indésirable.
Pour plus de contexte, certains incomplète discussion des changements à la gestion de la checked
attribut/propriété de la transition de la 1.5.x 1,6 peut être trouvé dans le version 1.6 notes de version et les attributs vs. propriétés section de la .prop()
documentation .
toute version de jQuery
si vous travaillez avec un seul élément, vous pouvez toujours modifier le HTMLInputElement
's .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'ils opéreront sur tous les éléments assortis.
utiliser:
$(".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');
c'est la bonne façon de vérifier et de décocher les cases à cocher avec jQuery, car c'est la norme multiplateformes, et va permettre des reposts de formulaire.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
ce faisant, vous utilisez les normes JavaScript pour vérifier et décocher les cases à cocher, de sorte que n'importe quel navigateur qui implémente correctement la propriété" vérifié " de l'élément de case à cocher exécutera ce code parfaitement. Ce devrait être tous les principaux navigateurs, mais je suis impossible de 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 changements d'attribut" vérifié".
voici un exemple d'attribut de case à cocher qui ne fait pas le travail après que quelqu'un a cliqué la case à cocher (cela se produit dans Chrome).
La Solution:
en utilisant la propriété" coché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 dans faire ce que nous veulent il à faire.
ce plugin va Modifiez la propriété contrôlée de tous les éléments sélectionnés par jQuery, et contrôlez et décochez avec succès les cases à cocher en toutes circonstances. Ainsi, bien que cela puisse sembler être une solution trop lourde, cela améliorera l'expérience utilisateur de votre site et aidera à prévenir 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 );
Sinon, si vous ne voulez pas utiliser un plugin, 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;
});
Vous pouvez le 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 voulez lancer, utilisez celui-ci à la place:
$("#mycheckbox").click();
vous pouvez décocher en supprimant entièrement l'attribut:
$('.myCheckbox').removeAttr('checked')
vous pouvez vérifier toutes les cases comme ceci:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
vous pouvez également étendre le $.fn objet 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));
alors vous pouvez juste 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.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
Le dernier déclenche l'événement click pour la case, les autres pas. Donc si vous avez du code personnalisé dans l'évènement onclick pour la case à cocher que vous voulez lancer, utilisez la dernière.
Pour cocher une case, vous devez utiliser
$('.myCheckbox').attr('checked',true);
ou
$('.myCheckbox').attr('checked','checked');
et pour décocher une case à cocher, vous devez toujours la mettre à false:
$('.myCheckbox').attr('checked',false);
Si vous n'
$('.myCheckbox').removeAttr('checked')
il supprime l'attribut tous ensemble et donc vous ne serez pas en mesure de réinitialiser le formulaire.
BAD DEMO jQuery 1.6 . Je pense que c'est cassé. Pour la 1.6 je suis va faire un nouveau post.
nouvelle démo de travail jquery 1.5.2 works in Chrome.
les deux démos utilisent
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
en supposant que la question Est...
Comment puis-je vérifier une case à cocher par valeur?
rappelez-vous que dans une case à cocher typique, toutes les étiquettes d'entrée ont le même nom, ils 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 prolongée avec un sélecteur plus spécifique , en utilisant la ligne suivante de code:
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
je rate la solution. J'utiliserai toujours:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
sélectionne les éléments qui ont l'attribut spécifié avec une valeur contenant le substrat "ckbItem":
$('input[name *= ckbItem]').prop('checked', true);
il sélectionnera tous les éléments qui contiennent ckbItem dans son attribut name.
pour vérifier une case à cocher en utilisant jQuery 1.6 ou plus:
checkbox.prop('checked', true);
pour décocher, utiliser:
checkbox.prop('checked', false);
voici ce que j'aime utiliser pour basculer une case à cocher en utilisant jQuery:
checkbox.prop('checked', !checkbox.prop('checked'));
si vous utilisez jQuery 1.5 ou moins:
checkbox.attr('checked', true);
pour décocher, utiliser:
checkbox.attr('checked', false);
Voici une façon 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>
essayez ceci:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
voici le code pour vérifié et non vérifié 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 jQuery 1.6 + prop, 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;
});
});
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');
si vous utilisez PhoneGap faire le développement d'application, et vous avez une valeur sur le bouton que vous voulez montrer instantanément, rappelez-vous de faire cela
$('span.ui-[controlname]',$('[id]')).text("the value");
j'ai trouvé que sans la portée, l'interface ne sera pas mise à jour quoi que vous fassiez.
voici le code et la démo pour vérifier 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;
}
}
});
une autre solution possible:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
si vous utilisez mobile et que vous voulez que l'interface mette à jour et affiche la case à cocher comme non vérifiée, utilisez ce qui suit:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Être au courant de fuites de mémoire dans Internet Explorer antérieures à la Internet Explorer 9 , comme le jQuery documentation états :
dans Internet Explorer avant la version 9, en utilisant .prop() pour définir un DOM propriété de l'élément à autre chose qu'une simple valeur primitive (nombre, chaîne, OU booléen) peut causer des fuites de mémoire si la propriété est pas supprimées (à l'aide .removeProp ()) avant que L'élément DOM soit retiré d'après le document. Pour définir en toute sécurité des valeurs sur des objets DOM sans mémoire les fuites, utiliser .données.)(
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');
pour vérifier et décocher
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
c'est probablement la solution la plus courte et la plus facile:
$(".myCheckBox")[0].checked = true;
ou
$(".myCheckBox")[0].checked = false;
encore plus court serait:
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
Ici est un jsFiddle .
comme @livefree75 a dit:
jQuery 1.5.x et inférieur à
vous pouvez également étendre le $.fn objet 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));
alors vous pouvez juste faire:
$(":checkbox").check();
$(":checkbox").uncheck();
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;
}
quand vous avez coché une case comme;
$('.className').attr('checked', 'checked')
ce n'est peut-être pas assez. Vous devriez également appeler la fonction ci-dessous;
$('.className').prop('checked', 'true')
surtout si vous retirez l'attribut coché case cochée.
je ne pouvais pas le faire fonctionner à l'aide de:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
vrai et faux cochez la case. Ce qui a fonctionné pour moi était:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
Voici la réponse complète en utilisant jQuery
je le teste et il fonctionne 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
});
En jQuery,
if($("#checkboxId").is(':checked')){
alert("Checked");
}
ou
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
En JavaScript,
if (document.getElementById("checkboxID").checked){
alert("Checked");
}