Marque um botão de opção com javascript

95

Por algum motivo, não consigo descobrir isso.

Tenho alguns botões de opção em meu html que alternam entre categorias:

<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

O usuário pode selecionar o que quiser, mas quando um determinado evento for acionado, quero definir 1234como botão de opção marcado como definido, porque esse é o botão de opção padrão marcado.

Eu tentei versões disso (com e sem jQuery):

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

Mas não parece se atualizar. Preciso atualizar visivelmente para que o usuário possa ver. Alguém pode ajudar?

EDIT: Estou apenas cansado e esquecido o #, obrigado por apontar, aquele e $.prop().

javascript html radio-button ptf
fonte
Verifique esta pergunta StackOverflow: [Como verificar um botão de opção com jQuery] [1] [1]: stackoverflow.com/questions/5665915/…
Mandy Schoep
8
mudar paradocument.getElementById('_1234').checked = true;
stackErr
1
@stackErr sem#
Tim Seguine
Desculpe, apenas copiar e colar errado. Atualizado agora. @FelipeKM Então por favor me ajude, não encontrei nenhum que ajude.
ptf
@kjelelokk verifique meu comentário ou resposta
Pointys

Respostas:

151

Não misture sintaxe CSS / JQuery ( #para identificador) com JS nativo.

Solução JS nativa:

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

Solução JQuery:

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

zavg
fonte
1
Tecnicamente, é a sintaxe do seletor CSS. jQuery apenas o pegou emprestado e estendeu
Tim Seguine
jQuery conseguiu isso querySelector, imagino.
Andy
muito melhor do que.attr("checked", "checked")
ma77c
@Andy - Sizzle foi usado no jQuery do início de 2006 em diante. ( en.wikipedia.org/wiki/JQuery#History ). querySelectornão foi lançado em navegadores até 2009 e não estava sendo amplamente usado por desenvolvedores até algum tempo depois disso. Nunca usei tanto o jQuery, mas teve um impacto significativo na evolução do JS.
Rounin de
isso define a caixa de seleção, mas não necessariamente aciona o evento associado. qual evento é disparado quando o usuário clica em um botão de rádio?
robisrob de
16

Se você deseja definir o botão "1234", você precisa usar seu "id":

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

Ao usar a API do navegador ("getElementById"), você não usa a sintaxe do seletor; você apenas passa o valor "id" real que está procurando. Você usa a sintaxe do seletor com jQuery ou .querySelector()e .querySelectorAll().

Pontudo
fonte
todos estão recebendo o elemento por ID. Tenho mais de um botão de opção com o mesmo nome. e eu acho que é o que a maioria das pessoas precisa para selecionar um grupo de rádios pelo nome e, com base no valor, verificar um deles.
Ndm Gjr
@NadeemGorsi o atributo "id" não pode ser compartilhado por mais de um elemento. Todos os valores de "id" devem ser únicos em uma determinada página.
Pointy de
9

Hoje, no ano de 2016, está salvo para usar document.querySelectorsem saber o ID (principalmente se você tiver mais de 2 botões de opção):

document.querySelector("input[name=main-categories]:checked").value
StanE
fonte
3
OK, mas como posso obter o efeito reverso ou verificar um rádio com base no valor .. e é sobre isso que a pergunta era na verdade.
Ndm Gjr
1
@NadeemGorsi Forneci uma resposta para selecionar ou "marcar" um botão de opção usando QuerySelector
kevinf
6

A maneira mais fácil provavelmente seria com jQuery, da seguinte maneira:

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

Isso adiciona um novo atributo "verificado" (que em HTML não precisa de um valor). Lembre-se de incluir a biblioteca jQuery:

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

Ao usar a document.getElementById()função, você não precisa passar #antes do id do elemento.

Código:

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

Demo: JSFiddle

Daniel Kmak
fonte
3

Consegui selecionar (marcar) um botão de entrada de rádio usando este código Javascript no Firefox 72, dentro de uma página de opção de extensão da web para CARREGAR o 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();
    }
});

Onde o código associado para SALVAR o valor era:

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

Dado HTML como o seguinte:

    <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