2010-08-04 13 views
18

Próbowałem dowiedzieć się, jak dodać atrybut "zaznaczony" do pola wyboru przy kliknięciu. Powodem, dla którego chcę to zrobić, jest to, jeśli zaznaczę pole wyboru; Mogę przechowywać lokalną pamięć jako HTML, więc gdy strona zostanie odświeżona zauważy, że pole wyboru jest zaznaczone. Jeśli teraz to sprawdzę, zanika rodzic, ale jeśli zapiszę i ponownie załaduję, pozostanie wyblakłe, ale pole wyboru nie jest zaznaczone.Dodaj atrybut "zaznaczone" w jquery kliknięcia

Próbowałem robić $ (this) .attr ("sprawdzone"); ale wydaje się, że nie chce tego dodawać.

EDIT: Po przeczytaniu komentarzy wydaje się, że nie było jasne. domyślną tag wejściowy jest:

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

muszę to top być więc kiedy kliknij pole wyboru, dodaje „zaznaczone” do końca tego. Ex:

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

muszę to zrobić to tak, kiedy zapisać HTML do pamięci lokalnej, gdy ładuje, to sprawia, że ​​pole wyboru jako sprawdzone.

$(".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'); 
} 
}); 

Odpowiedz

20

Wygląda na to, że jest to jedna z nielicznych okazji, w których użycie odpowiedniego atrybutu jest właściwe. Metoda jQuery's attr() nie pomoże ci, ponieważ w większości przypadków (w tym) faktycznie ustawia właściwość, a nie atrybut, przez co wybór jej nazwy wygląda nieco głupio. [UPDATE: Ponieważ jQuery 1.6.1, the situation has changed slightly]

IE ma pewne problemy z metody DOM setAttribute ale w tym przypadku powinno być dobrze:

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

W IE, to zawsze będzie rzeczywiście zrobić zaznaczone pole wyboru. W innych przeglądarkach, jeśli użytkownik zaznaczył i odznaczył to pole wyboru, ustawienie atrybutu nie będzie miało widocznego efektu.Dlatego, jeśli chcesz zagwarantować pole wyboru jest zaznaczone, a także posiadające atrybut checked, trzeba ustawić właściwość checked także:

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

Aby odznaczyć pole wyboru i usunąć atrybut, należy wykonać następujące czynności:

this.setAttribute("checked", ""); // For IE 
this.removeAttribute("checked"); // For other browsers 
this.checked = false; 
+0

Podoba mi się to, co masz tutaj , ale OP poprosił o jQuery. Ale +1 dla prostej js. Dobrze znać rdzeń, zanim poznasz ramy. – hookedonwinter

+0

Cóż, nie jestem pewien, czy jQuery to robi. Ale może być źle. –

+0

Dziękuję za pomoc, proste javascript jest absolutnie w porządku ze mną, właśnie używałem jquery więc pomyślałem, że zapytam. Ponownie, dzięki za pomoc. – MoDFoX

28

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

tylko attr('checked') zwróci wartość $ (this) 's sprawdzonej atrybutu. Aby go ustawić, potrzebujesz tego drugiego argumentu. Na podstawie <input type="checkbox" checked="checked" />

Edit:

na podstawie uwag, bardziej odpowiednie manipulowanie byłoby:

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

I prostą metodę javascript, bardziej odpowiednie i efektywne:

this.checked = true; 

Dzięki @Andy E za to.

+4

Ze względu na sposób jQuery mapach przypisuje właściwości DOM, '$ (this) .attr ('sprawdzone', true);' jest bardziej odpowiednie. 'this.checked = true;' jest jeszcze bardziej odpowiednie, ponieważ jest bardziej wydajne. –

+0

@ [Andy E] oh cool. tego nie wiedziałem. edytując moją odpowiedź, aby odzwierciedlić. – hookedonwinter

+0

@hookedonwinter: w oparciu o Twoją aktualizację uważam, że byłoby niegrzeczne, abym nie głosował;) +1. –

6

Jeśli .attr() nie pracuje dla ciebie (szczególnie podczas sprawdzania i pudełka odznaczając z rzędu), użyj zamiast .attr().prop().

+0

Twoja odpowiedź jest najlepsza (imho). Funkcja .attr() po prostu dodaje atrybut, ale nie aktualizuje stanu pola wyboru. .prop() - pomógł mi rozwiązać mój problem. – Max

1

użyć tego kodu

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