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

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