Marque un botón de radio con javascript

95

Por alguna razón, parece que no puedo resolver esto.

Tengo algunos botones de radio en mi html que alternan categorías:

<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

El usuario puede seleccionar lo que quiera, pero cuando se activa un evento determinado, quiero configurar el 1234botón de opción marcado como marcado, porque este es el botón de opción marcado por defecto.

He probado versiones de esto (con y sin jQuery):

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

Pero no parece actualizarse. Necesito que se actualice visiblemente para que el usuario pueda verlo. ¿Alguien puede ayudar?

EDITAR: Estoy cansado y pasé por alto #, gracias por señalarlo, eso y $.prop().

javascript html radio-button ptf
fuente
Verifique esta pregunta de StackOverflow: [Cómo verificar un botón de opción con jQuery] [1] [1]: stackoverflow.com/questions/5665915/…
Mandy Schoep
8
cambiar adocument.getElementById('_1234').checked = true;
stackErr
1
@stackErr sin el#
Tim Seguine
Lo siento, solo una copia y pegado incorrectos. Actualizado ahora. @FelipeKM Entonces por favor ayúdame, no he encontrado uno que ayude.
ptf
@kjelelokk verifique mi comentario o la respuesta de
Pointys

Respuestas:

151

No mezcle la sintaxis CSS / JQuery ( #para el identificador) con JS nativo.

Solución JS nativa:

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

Solución JQuery:

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

zavg
fuente
1
Técnicamente es la sintaxis del selector de CSS. jQuery lo tomó prestado y lo extendió
Tim Seguine
jQuery lo obtuvo, querySelectorme imagino.
Andy
mucho mejor que.attr("checked", "checked")
ma77c
@Andy - Sizzle se usó en jQuery desde principios de 2006 en adelante. ( en.wikipedia.org/wiki/JQuery#History ). querySelectorno se envió a los navegadores hasta 2009 y los desarrolladores no lo utilizaron ampliamente hasta algún tiempo después. Nunca he usado tanto jQuery, pero tuvo un impacto significativo en la evolución de JS.
Rounin
esto establece la casilla de verificación pero no necesariamente activa el evento asociado. ¿Qué evento se activa cuando el usuario hace clic en un botón de opción?
robisrob
16

Si desea configurar el botón "1234", debe usar su "id":

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

Cuando utiliza la API del navegador ("getElementById"), no utiliza la sintaxis del selector; simplemente pasa el valor real de "id" que está buscando. Utiliza la sintaxis del selector con jQuery o .querySelector()y .querySelectorAll().

Puntiagudo
fuente
todos obtienen el elemento por ID. Tengo más de un botón de opción con el mismo nombre. y creo que eso es lo que la mayoría de la gente necesita para seleccionar un grupo de radios por su nombre y luego, en función del valor, comprobar una de ellas.
Ndm Gjr
@NadeemGorsi el atributo "id" no puede ser compartido por más de un elemento. Todos los valores de "id" deben ser únicos en una página determinada.
Puntiagudo
9

Hoy, en el año 2016, se puede usar document.querySelectorsin conocer la identificación (especialmente si tiene más de 2 botones de opción):

document.querySelector("input[name=main-categories]:checked").value
StanE
fuente
3
Está bien, pero ¿cómo puedo obtener el efecto inverso o verificar una radio en función del valor ... y de eso se trataba la pregunta?
Ndm Gjr
1
@NadeemGorsi Proporcioné una respuesta para seleccionar o "marcar" un botón de opción usando QuerySelector
kevinf
6

La forma más fácil probablemente sería con jQuery, de la siguiente manera:

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

Esto agrega un nuevo atributo "verificado" (que en HTML no necesita un valor). Solo recuerde incluir la biblioteca jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Esser
fuente
O simplemente$("#_1234").prop("checked", true)
indefinido
3

Al usar la document.getElementById()función, no tiene que pasar #antes de la identificación del elemento.

Código:

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

Demostración: JSFiddle

Daniel Kmak
fuente
3

Pude seleccionar (marcar) un botón de entrada de radio usando este código Javascript en Firefox 72, dentro de una página de opciones de Extensión Web para CARGAR el valor:

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

Donde el código asociado para GUARDAR el valor fue:

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

Dado HTML como el siguiente:

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