Jak można zaznaczyć / odznaczyć pole wyboru za pomocą JavaScript, jQuery lub wanilii?
javascript
jquery
checkbox
lisovaccaro
źródło
źródło
Odpowiedzi:
JavaScript:
jQuery (1.6+):
jQuery (1.5-):
źródło
attr
lubprop
?.checked = true/false
nie wyzwalachange
zdarzenia: - \Ważne zachowanie, o którym jeszcze nie wspomniano:
Programowe ustawienie zaznaczonego atrybutu nie uruchamia
change
zdarzenia pola wyboru .Przekonaj się w tym skrzypcach:
http://jsfiddle.net/fjaeger/L9z9t04p/4/
(Fiddle przetestowany w Chrome 46, Firefox 41 i IE 11)
click()
metodaPewnego dnia może się okazać, że piszesz kod, który zależy od odpalonego zdarzenia. Aby mieć pewność, że zdarzenie zostanie uruchomione, wywołaj
click()
metodę elementu checkbox, tak jak poniżej:Zmienia to jednak status zaznaczonego pola wyboru, zamiast ustawiania go na
true
lubfalse
. Pamiętaj, żechange
zdarzenie powinno zostać uruchomione tylko wtedy, gdy zaznaczony atrybut faktycznie się zmieni.Dotyczy to również sposobu jQuery: ustawienie atrybutu za pomocą
prop
lubattr
nie powoduje uruchomieniachange
zdarzenia.Ustawienie
checked
określonej wartościMożesz przetestować
checked
atrybut przed wywołaniemclick()
metody. Przykład:Przeczytaj więcej na temat metody kliknięcia tutaj:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
źródło
elm.dispatchEvent(new Event('change'));
sprawdzić:
odznacz:
źródło
Możemy zaznaczyć pole wyboru cząstek stałych, ponieważ,
i odznacz,
źródło
Chciałbym zauważyć, że ustawienie atrybutu „zaznaczone” na niepusty ciąg prowadzi do zaznaczenia pola wyboru.
Jeśli więc ustawisz atrybut „zaznaczony” na „false” , pole wyboru zostanie zaznaczone. Musiałem ustawić wartość na pusty ciąg, null lub wartość logiczną false , aby upewnić się, że pole wyboru nie jest zaznaczone.
źródło
Spróbuj tego:
źródło
źródło
źródło
Jeśli z jakiegoś powodu, nie chcą (lub nie mogą) uruchomić
.click()
na elemencie checkbox, można po prostu zmienić jego wartość bezpośrednio poprzez jego właściwości .checked (AN atrybutu IDL z<input type="checkbox">
).Pamiętaj, że zrobienie tego nie powoduje uruchomienia normalnie powiązanego zdarzenia ( zmiany ), dlatego musisz ręcznie uruchomić to, aby uzyskać kompletne rozwiązanie, które działa z powiązanymi programami obsługi zdarzeń.
Oto funkcjonalny przykład w surowym javascript (ES6):
Jeśli uruchomisz to i klikniesz zarówno pole wyboru, jak i przycisk, powinieneś dowiedzieć się, jak to działa.
Zauważ, że użyłem document.querySelector dla zwięzłości / prostoty, ale można to łatwo zbudować tak, aby albo miał dany identyfikator przekazany do konstruktora, albo może mieć zastosowanie do wszystkich przycisków, które działają jak etykiety aria dla pola wyboru (zwróć uwagę, że I nie zawracałem sobie głowy ustawieniem identyfikatora na przycisku i nadaniem temu polu wyboru arii-labelledby, co powinno być zrobione, jeśli używasz tej metody) lub na wiele innych sposobów, aby to rozwinąć. Dwa ostatnie
addEventListener
mają tylko pokazać, jak to działa.źródło
Spróbuj pojedynczej kontroli
dla wielu prób
Pokaż fragment kodu
źródło
Zgadzam się z aktualnymi odpowiedziami, ale w moim przypadku nie działa, mam nadzieję, że ten kod pomoże komuś w przyszłości:
źródło