Sprawdź przycisk radiowy za pomocą javascript

98

Z jakiegoś powodu nie mogę tego rozgryźć.

Mam kilka przycisków opcji w moim html, które przełączają kategorie:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

Użytkownik może wybrać, co chce, ale gdy wyzwala określone zdarzenie, chcę ustawić 1234przycisk opcji jako zaznaczony, ponieważ jest to domyślnie zaznaczony przycisk opcji.

Wypróbowałem wersje tego (z jQuery i bez):

document.getElementById('#_1234').checked = true;

Ale wydaje się, że nie aktualizuje się. Potrzebuję widocznej aktualizacji, aby użytkownik mógł to zobaczyć. Czy ktoś może pomóc?

EDYCJA: Jestem po prostu zmęczony i przeoczyłem #, dziękuję za wskazanie tego, i $.prop().

javascript html radio-button ptf
źródło
Sprawdź to pytanie dotyczące StackOverflow: [Jak sprawdzić przycisk radiowy za pomocą jQuery] [1] [1]: stackoverflow.com/questions/5665915/…
Mandy Schoep
8
zmień nadocument.getElementById('_1234').checked = true;
stackErr
1
@stackErr without the#
Tim Seguine
Przepraszamy, po prostu zła kopiuj-wklej. Zaktualizowano teraz. @FelipeKM W takim razie pomóż mi, nie znalazłem takiego, który pomaga.
ptf
@kjelelokk sprawdź mój komentarz lub odpowiedź
Pointys

Odpowiedzi:

159

Nie mieszaj składni CSS / JQuery ( #dla identyfikatora) z natywnym JS.

Natywne rozwiązanie JS:

document.getElementById("_1234").checked = true;

Rozwiązanie JQuery:

$("#_1234").prop("checked", true);

zavg
źródło
1
Technicznie jest to składnia selektora CSS. jQuery właśnie go pożyczył i przedłużył
Tim Seguine
querySelectorWyobrażam sobie, że jQuery to wziął .
Andy
znacznie lepiej niż.attr("checked", "checked")
ma77c
@Andy - Sizzle był używany w jQuery od początku 2006 roku. ( en.wikipedia.org/wiki/JQuery#History ). querySelectornie był dostarczany w przeglądarkach do 2009 roku i dopiero jakiś czas później nie był powszechnie używany przez programistów. Nigdy nie używałem tak często jQuery, ale znacząco wpłynęło to na ewolucję JS.
Rounin
powoduje to ustawienie pola wyboru, ale niekoniecznie wywołuje skojarzone zdarzenie. jakie zdarzenie jest wywoływane, gdy użytkownik kliknie przycisk opcji?
robisrob
17

Jeśli chcesz ustawić przycisk „1234”, musisz użyć jego „id”:

document.getElementById("_1234").checked = true;

Kiedy używasz interfejsu API przeglądarki („getElementById”), nie używasz składni selektora; po prostu przekazujesz rzeczywistą wartość „id”, której szukasz. Używasz składni selektora z jQuery lub .querySelector()i .querySelectorAll().

Spiczasty
źródło
każdy otrzymuje element według identyfikatora. Mam więcej niż jeden przycisk opcji o tej samej nazwie. i myślę, że właśnie tego większość ludzi potrzebuje, aby wybrać grupę radiotelefonów według nazwy, a następnie w oparciu o sprawdzenie wartości jednego z nich.
Ndm Gjr
@NadeemGorsi atrybut „id” nie może być współużytkowany przez więcej niż jeden element. Wszystkie wartości „id” muszą być unikalne na danej stronie.
Pointy
9

Dziś, w roku 2016, można go używać document.querySelectorbez znajomości identyfikatora (zwłaszcza jeśli masz więcej niż 2 przyciski opcji):

document.querySelector("input[name=main-categories]:checked").value
StanE
źródło
3
OK, ale jak mogę uzyskać efekt odwrotny lub sprawdzić radio na podstawie wartości .. i o to właściwie chodziło.
Ndm Gjr
1
@NadeemGorsi Podałem odpowiedź, aby wybrać lub „sprawdzić” przycisk opcji za pomocą QuerySelector
kevinf
6

Najłatwiejszym sposobem byłoby prawdopodobnie użycie jQuery w następujący sposób:

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

To dodaje nowy atrybut „zaznaczone” (który w HTML nie potrzebuje wartości). Pamiętaj tylko o dołączeniu biblioteki jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Esser
źródło
Lub po prostu$("#_1234").prop("checked", true)
niezdefiniowane
3

Używając document.getElementById()funkcji nie musisz podawać #przed id elementu.

Kod:

document.getElementById('_1234').checked = true;

Demo: JSFiddle

Daniel Kmak
źródło
3

Udało mi się wybrać (sprawdzić) przycisk wprowadzania opcji za pomocą tego kodu JavaScript w przeglądarce Firefox 72, na stronie opcji rozszerzenia sieci Web, aby załadować wartość:

var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

Gdzie powiązany kod do ZAPISANIA wartość to:

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

Biorąc pod uwagę HTML, jak poniżej:

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>
kevinf
źródło