.prop ('zaznaczone', fałsz) czy .removeAttr ('zaznaczone')?

115

Wraz z wprowadzeniem metody prop, teraz muszę znać akceptowany sposób usuwania zaznaczenia pola wyboru. Czy to:

$('input').filter(':checkbox').removeAttr('checked');

lub

$('input').filter(':checkbox').prop('checked',false);
jquery Phillip Senn
źródło
4
Czytałeś post Johna Resiga? ejohn.org/blog/jquery-16-and-attr
Jared Farrish

Odpowiedzi:

130

jQuery 3

Jak jQuery 3, removeAttrczy nie ustawić odpowiednią właściwość falsejuż:

Przed jQuery 3.0, stosując .removeAttr()na atrybutu logicznego takich jak checked, selectedlub readonlyrównież ustawić odpowiadającą nazwie właściwość false. To zachowanie było wymagane w starszych wersjach programu Internet Explorer, ale nie jest poprawne dla nowoczesnych przeglądarek, ponieważ atrybut reprezentuje wartość początkową, a właściwość reprezentuje wartość bieżącą (dynamiczną).

Używanie .removeAttr( "checked" )na elemencie DOM prawie zawsze jest błędem . Jedynym przypadkiem, w którym może się to przydać, jest to, że DOM ma zostać później serializowany z powrotem do łańcucha HTML. We wszystkich innych przypadkach .prop( "checked", false )należy użyć zamiast tego.

Changelog

Stąd tylko .prop('checked',false)jest poprawny sposób korzystania z tej wersji.

Oryginalna odpowiedź (z 2011 r.):

W przypadku atrybutów, które mają podstawowe właściwości logiczne (z których checkedjest jedna), removeAttrautomatycznie ustawia podstawową właściwość na false. (Zauważ, że jest to jedna z "poprawek" kompatybilności wstecznej dodanych w jQuery 1.6.1).

Więc albo zadziała ... ale drugi przykład, który podałeś (używając prop), jest bardziej poprawny z tych dwóch. Jeśli Twoim celem jest odznaczenie pola wyboru, naprawdę chcesz wpłynąć na właściwość , a nie atrybut, i nie ma potrzeby, aby removeAttrto zrobić.

John Flatness
źródło
36
@tandu: Użytkownik może , ale nie należy. Z dokumentów: „ Uwaga: nie używaj [ removeProp()] do usuwania właściwości natywnych, takich jak zaznaczone, wyłączone lub wybrane. Spowoduje to całkowite usunięcie właściwości i po usunięciu nie będzie można jej ponownie dodać do elementu. Użyj, .prop()aby ustawić te właściwości na fałsz zamiast." removePropjest naprawdę przeznaczony do użytku tylko z właściwościami niestandardowymi.
John Flatness,
17

use checked: true, false właściwość pola wyboru.

jQuery:

if($('input[type=checkbox]').is(':checked')) {
    $(this).prop('checked',true);
} else {
    $(this).prop('checked',false);
}
suraj rawat
źródło
Możemy wyeliminować if, w przeciwnym razie, używając jednej linijki, $ (this) .prop ('zaznaczone', $ ('input [type = checkbox]'). Is (': selected'));
Yousaf Hassan
8

Polecam używać obu funkcji, prop i attr, ponieważ miałem problemy z Chrome i rozwiązałem je za pomocą obu funkcji. 

if ($(':checkbox').is(':checked')){
    $(':checkbox').prop('checked', true).attr('checked', 'checked');
}
else {
    $(':checkbox').prop('checked', false).removeAttr('checked');
}
Ragnar
źródło
Tak, do chromu, użyj: $("input[type='checkbox'], input[type='radio']").prop("checked", false).attr("checked", false).removeAttr("checked");
Rod
Używam komponentu niestandardowego (CSS + JS), aby zastąpić radio wejściowe i pole wyboru. To jedyny sposób, który działa dla mnie. Dzięki!
Silvio Delgado
3

Inną alternatywą, aby zrobić to samo, jest filtrowanie według atrybutu type = checkbox :

$('input[type="checkbox"]').removeAttr('checked');

lub

$('input[type="checkbox"]').prop('checked' , false);

Pamiętaj, że różnica między atrybutami a właściwościami może być ważna w określonych sytuacjach. Przed jQuery 1.6 metoda .attr () czasami brała pod uwagę wartości właściwości podczas pobierania niektórych atrybutów, co mogło powodować niespójne zachowanie. Począwszy od jQuery 1.6, metoda .prop () umożliwia jawne pobieranie wartości właściwości, podczas gdy .attr () pobiera atrybuty.

Dowiedz się więcej ...

tonnoz
źródło
2
Pytanie brzmiało: „Który z nich jest bardziej poprawny”, a nie „Czy są inne sposoby na zrobienie tego?”. Wygląda na to, że nie próbowałeś odpowiedzieć na pytanie
Andrew Stubbs,