Botão de opção JavaScript

Resumo : neste tutorial, você aprenderá como usar JavaScript para verificar qual botão de opção em um grupo de opções está marcado.

Introdução ao botão de opção JavaScript

Os botões de opção permitem selecionar apenas uma de um conjunto predefinido de opções mutuamente exclusivas. Para criar um botão de opção, você usa o <input>elemento com o tipo radio. Um grupo de botões de opção é chamado de grupo de opções.

Para formar um grupo de opções, você usa um nome comum para todos os botões de opção. Por exemplo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>

<body>
    <p>Select your size:</p>
    <div>
        <input type="radio" name="size" value="XS" id="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" value="S" id="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" value="M" id="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" value="L" id="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" value="XL" id="xl">
        <label for="xl">XL</label>
    </div>
    <div>
        <input type="radio" name="size" value="XXL" id="xxl">
        <label for="xxl">XXL</label>
    </div>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Neste exemplo, todos os botões de opção têm o mesmo tamanho de nome, mas valores diferentes. Por causa disso, você só pode selecionar um botão de opção por vez.

Para encontrar o botão de opção selecionado, siga estas etapas:

  • Selecione todos os botões de opção usando um método DOM como querySelectorAll()método.
  • Obtenha a checkedpropriedade do botão de opção. Se a checkedpropriedade for true, o botão de opção estará marcado; caso contrário, está desmarcado.

Para saber qual botão de opção está marcado, você usa o valueatributo. Por exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>
<body>
    <p>Select your size:</p>
    <div>
        <input type="radio" name="size" value="XS" id="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" value="S" id="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" value="M" id="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" value="L" id="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" value="XL" id="xl">
        <label for="xl">XL</label>
    </div>
    <div>
        <input type="radio" name="size" value="XXL" id="xxl">
        <label for="xxl">XXL</label>
    </div>
    <p>
        <button id="btn">Show Selected Value</button>
    </p>

    <p id="output"></p>

    <script>
        const btn = document.querySelector('#btn');        
        const radioButtons = document.querySelectorAll('input[name="size"]');
        btn.addEventListener("click", () => {
            let selectedSize;
            for (const radioButton of radioButtons) {
                if (radioButton.checked) {
                    selectedSize = radioButton.value;
                    break;
                }
            }
            // show the output:
            output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;
        });
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Como funciona.

Primeiro, selecione o botão com #btnid, o elemento de saída com o #outputid e todos os botões de opção com o nome size:

const btn = document.querySelector('#btn');
const output = document.querySelector('#output');

const radioButtons = document.querySelectorAll('input[name="size"]');
Linguagem de código:  JavaScript  ( javascript )

Segundo, registre um ouvinte de evento de clique no elemento botão:

btn.addEventListener('click', () => {
});Linguagem de código:  PHP  ( php )

Terceiro, itere sobre os botões de opção e obtenha o valor do botão de opção selecionado:

let selectedSize;
for (const radioButton of radioButtons) {
  if (radioButton.checked) {
    selectedSize = radioButton.value;
    break;
  }
}Linguagem de código:  JavaScript  ( javascript )

Se um botão de opção estiver marcado, sua checkedpropriedade será true. Em seguida, atribuímos o valor valuedo botão de opção selecionado à selectedSizevariável.

Como apenas um botão de opção em um grupo de opções pode ser verificado por vez, o loop é encerrado imediatamente pela breakinstrução.

Finalmente, defina a mensagem para o elemento de saída:

 output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;Linguagem de código:  JavaScript  ( javascript )

Evento de alteração do botão de opção

Quando você marca ou desmarca um botão de opção, ele dispara o evento change. Para ouvir o evento change, você usa o método addEventListener() assim:

radioButton.addEventListener('change',function(e){
    
});Linguagem de código:  JavaScript  ( javascript )

Dentro do manipulador de eventos change, você pode acessar a thispalavra-chave para acessar o botão de opção. Para verificar se o botão de opção está marcado, você pode usar a propriedade marcada:

if(this.checked) {
  // 
}Linguagem de código:  JavaScript  ( javascript )

Para obter o valor do botão marcado, você usa a propriedade value:

if(this.checked) {
    console.log(this.value);
}Linguagem de código:  JavaScript  ( javascript )

Será assim:

radioButton.addEventListener('change', function (e) {
  if (this.checked) {
    console.log(this.value);
  }
});Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir gera dinamicamente um grupo de opções e mostra o valor selecionado quando um botão de opção é marcado:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>

<body>
    <p>Select your size:</p>
    <div id="group">
    </div>

    <p id="output"></p>

    <script>
        const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];

        // generate the radio groups        
        const group = document.querySelector("#group");
        group.innerHTML = sizes.map((size) => `<div>
                <input type="radio" name="size" value="${size}" id="${size}">
                 <label for="${size}">${size}</label>
            </div>`).join(' ');
        
        // add an event listener for the change event
        const radioButtons = document.querySelectorAll('input[name="size"]');
        for(const radioButton of radioButtons){
            radioButton.addEventListener('change', showSelected);
        }        
        
        function showSelected(e) {
            console.log(e);
            if (this.checked) {
                document.querySelector('#output').innerText = `You selected ${this.value}`;
            }
        }
    </script>
</body>

</html>Linguagem de código:  HTML, XML  ( xml )

Como funciona.

Primeiro, defina uma matriz de strings que contenha os tamanhos. Na prática, você pode obter esses valores de um banco de dados no back-end ou do resultado de uma chamada de API:

const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];Linguagem de código:  JavaScript  ( javascript )

Segundo, gere os grupos de rádio a partir dos elementos da matriz de tamanhos:

const group = document.querySelector('#group');
group.innerHTML = sizes
  .map(
    (size) => `<div>
                <input type="radio" name="size" value="${size}" id="${size}">
                 <label for="${size}">${size}</label>
            </div>`
  )
  .join(' ');
Linguagem de código:  JavaScript  ( javascript )

Neste código:

1) Selecione o elemento com id #group.

2) Gere um grupo de rádio usando o método map() com literais de modelo; cada elemento da matriz corresponde a um botão de opção HTML.

3) Junte strings HTML de botão de opção em uma string HTML usando o método join().

4) Atribua o HTML ao innerHTML do elemento de saída.

Terceiro, selecione todos os botões de opção com o nome size e adicione o ouvinte de evento change:

const radioButtons = document.querySelectorAll('input[name="size"]');
for (const radioButton of radioButtons) {
  radioButton.addEventListener('change', showSelected);
}Linguagem de código:  JavaScript  ( javascript )

Finalmente, defina o manipulador de eventos de mudança:

function showSelected(e) {
  if (this.checked) {
    document.querySelector('#output').innerText = `You selected ${this.value}`;
  }
}Linguagem de código:  JavaScript  ( javascript )

Resumo

  • Use o <input>elemento com o tipo radiopara criar um botão de opção.
  • Atribua um nome a vários botões de opção para formar um grupo de opções. Apenas um botão de opção no grupo pode ser selecionado.
  • Se o botão de opção estiver selecionado, sua checkedpropriedade será true.
Caixa de seleção JavaScript
Anterior
Caixa de seleção JavaScript

Próximo
Elemento de seleção JavaScript

Elemento de seleção JavaScript

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *