Controlla un pulsante di opzione con javascript

95

Per qualche ragione, non riesco a capirlo.

Ho alcuni pulsanti di opzione nel mio html che alterna le categorie:

<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

L'utente può selezionare quello che vuole, ma quando si attiva un determinato evento, voglio impostare il 1234pulsante di opzione selezionato, perché questo è il pulsante di opzione selezionato di default.

Ho provato versioni di questo (con e senza jQuery):

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

Ma non sembra aggiornarsi. Ho bisogno che si aggiorni visibilmente in modo che l'utente possa vederlo. Qualcuno può aiutare?

EDIT: Sono solo stanco e ho trascurato #, grazie per averlo fatto notare, quello e $.prop().

javascript html radio-button

— ptf
fonte

Controlla questa domanda StackOverflow: [Come controllare un pulsante di opzione con jQuery] [1] [1]: stackoverflow.com/questions/5665915/…

— Mandy Schoep

8

cambia indocument.getElementById('_1234').checked = true;

— stackErr

1

@stackErr senza il#

— Tim Seguine

Spiacenti, solo un copia-incolla sbagliato. Aggiornato ora. @FelipeKM Allora per favore aiutami, non ne ho trovato uno che aiuti.

— ptf

@kjelelokk controlla il mio commento o la risposta di

— Pointys

151

Non mescolare la sintassi CSS / JQuery ( #per l'identificatore) con JS nativo.

Soluzione JS nativa:

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

Soluzione JQuery:

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

— zavg
fonte

1

Tecnicamente è la sintassi del selettore CSS. jQuery lo ha appena preso in prestito e esteso

— Tim Seguine

jQuery l'ha preso da querySelectorimmagino.

— Andy

molto meglio di.attr("checked", "checked")

— ma77c

@ Andy - Sizzle è stato utilizzato in jQuery dall'inizio del 2006 in poi. ( en.wikipedia.org/wiki/JQuery#History ). querySelectornon è stato distribuito nei browser fino al 2009 e non è stato ampiamente utilizzato dagli sviluppatori fino a qualche tempo dopo. Non ho mai usato jQuery così tanto, ma ha avuto un impatto significativo sull'evoluzione di JS.

— Rounin

questo imposta la casella di controllo ma non attiva necessariamente l'evento associato. quale evento viene attivato quando l'utente fa clic su un pulsante di opzione?

— robisrob

16

Se vuoi impostare il pulsante "1234", devi usare il suo "id":

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

Quando utilizzi l'API del browser ("getElementById"), non utilizzi la sintassi del selettore; devi solo passare il valore "id" effettivo che stai cercando. Si utilizza la sintassi del selettore con jQuery o .querySelector()e .querySelectorAll().

— A punta
fonte

tutti stanno ottenendo l'elemento tramite ID Ho più di un pulsante di opzione con lo stesso nome. e penso che sia ciò di cui la maggior parte delle persone ha bisogno per selezionare un gruppo di radio per nome e poi in base al valore controlla uno di loro.

— Ndm Gjr

@NadeemGorsi l'attributo "id" non può essere condiviso da più di un elemento. Tutti i valori "id" devono essere univoci in una determinata pagina.

— Pointy

9

Oggi, nell'anno 2016, è possibile utilizzarlo document.querySelectorsenza conoscere l'ID (soprattutto se si hanno più di 2 pulsanti di opzione):

document.querySelector("input[name=main-categories]:checked").value

— StanE
fonte

3

OK, ma come posso ottenere l'effetto inverso o controllare una radio in base al valore .. ed è proprio di questo che si trattava.

— Ndm Gjr

1

@NadeemGorsi Ho fornito una risposta per selezionare o "controllare" un pulsante di opzione utilizzando QuerySelector

— kevinf

6

Il modo più semplice sarebbe probabilmente con jQuery, come segue:

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

Questo aggiunge un nuovo attributo "controllato" (che in HTML non ha bisogno di un valore). Ricorda solo di includere la libreria jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

— Esser
fonte

O semplicemente$("#_1234").prop("checked", true)

— undefined

3

Usando la document.getElementById()funzione non devi passare #prima dell'id dell'elemento.

Codice:

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

Demo: JSFiddle

— Daniel Kmak
fonte

3

Sono stato in grado di selezionare (controllare) un pulsante di input radio utilizzando questo codice Javascript in Firefox 72, all'interno di una pagina di opzioni Web Extension per CARICARE il valore:

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();
    }
});

Dove il codice associato per SALVARE il valore era:

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

Dato HTML come il seguente:

    <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
fonte