web-dev-qa-db-fra.com

Ajouter un attribut 'vérifié' sur click jquery

J'ai essayé de comprendre comment ajouter l'attribut "vérifié" à une case à cocher au clic. La raison pour laquelle je veux le faire est donc si je décoche une case à cocher; Je peux demander à mon stockage local de l'enregistrer au format HTML, donc lorsque la page est actualisée, il remarque que la case est cochée. À partir de maintenant, si je le coche, le fondu disparaît, mais si je l'enregistre et le recharge, il reste effacé mais la case n'est pas cochée.

J'ai essayé de faire $ (this) .attr ('vérifié'); mais il ne semble pas vouloir ajouter coché.

EDIT: Après avoir lu les commentaires, il semble que je n'étais pas clair. Ma balise d'entrée par défaut est:

<input type="checkbox" class="done">

J'ai besoin que ce soit top donc quand je clique sur la case à cocher, il ajoute "vérifié" à la fin de cela. Ex:

<input type="checkbox" class="done" checked>

J'en ai besoin pour le faire, donc quand j'enregistre le html dans le stockage local, quand il se charge, il rend la case cochée.

$(".done").live("click", function(){
if($(this).parent().find('.editor').is(':visible') ) {
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
}
if ($(this).is(':checked')) {
$(this).parent().fadeTo('slow', 0.5);
$(this).attr('checked'); //This line
}else{

$(this).parent().fadeTo('slow', 1);
$(this).removeAttr('checked');
}
});
javascriptjqueryhtml5local-storage
23
MoDFoX

Il semble que ce soit l'une des rares occasions où l'utilisation d'un attribut est réellement appropriée. La méthode attr() de jQuery ne vous aidera pas car dans la plupart des cas (y compris ceci), elle définit en fait une propriété, pas un attribut, ce qui rend le choix de son nom quelque peu stupide. [MISE À JOUR: depuis jQuery 1.6.1, la situation a légèrement changé ]

IE a quelques problèmes avec la méthode DOM setAttribute mais dans ce cas ça devrait aller:

this.setAttribute("checked", "checked");

Dans IE, cela fera toujours cocher la case. Dans d'autres navigateurs, si l'utilisateur a déjà coché et décoché la case, la définition de l'attribut n'aura aucun effet visible. Par conséquent, si vous souhaitez garantir que la case à cocher est cochée ainsi que l'attribut checked, vous devez également définir la propriété checked:

this.setAttribute("checked", "checked");
this.checked = true;

Pour décocher la case et supprimer l'attribut, procédez comme suit:

this.setAttribute("checked", ""); // For IE
this.removeAttribute("checked"); // For other browsers
this.checked = false;
26
Tim Down

$( this ).attr( 'checked', 'checked' )

juste attr( 'checked' ) renverra la valeur de l'attribut vérifié de $ (this). Pour le définir, vous avez besoin de ce deuxième argument. Basé sur <input type="checkbox" checked="checked" />

Modifier:

Sur la base des commentaires, une manipulation plus appropriée serait:

$( this ).attr( 'checked', true )

Et une méthode javascript simple, plus appropriée et efficace:

this.checked = true;

Merci @ Andy E pour cela.

32
hookedonwinter

Si .attr() ne fonctionne pas pour vous (en particulier lorsque vous cochez et décochez les cases successivement), utilisez .prop() au lieu de .attr().

8
charliepark

utilisez ce code

var sid = $(this);
sid.attr('checked','checked');
1
user1948368