Exibir ou ocultar parte do formulário com inputs

Preciso de um código que ao selecionar o input “Devolução”, seja exibido o card “Tipo de Devolução” e nas outras opções(inputs) fique oculto.

       <div class="card">
        <div class="card-header bg-secondary text-white">
            <li ><b>Tipo do Recebimento</b></li> 
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Normal"><b>Normal (Revenda / Estoque)</b >
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Industrialização"><b>Industrialização</b> 
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Devolução"><b>Devolução</b>
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Recusa"><b>Recusa</b>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-secondary text-white">
            <li ><b>Tipo de Devolução</b></li> 
        </div>

        <div class="card-body">
            <div class="form-row" >
                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_DEV" value="Total"><b>Total</b >
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_DEV" value="Parcial"><b>Parcial</b >
                </div>
            </div>
        </div>
    </div>

Usei este js e funcionou, mas quando avanço as atividades o segundo card "Tipo de Devolução" deixa de aparecer no formulário.

        const inputs = document.getElementsByName('RECEBMAT_TIPO');
        const card = document.getElementById('TIPO_DEV');

        inputs.forEach(i => i.addEventListener('change', e => {
            if (e.target.value === 'Devolução') card.style.display = 'block'
            else card.style.display = 'none'
        }));

Caso selecionado "Devolução", preciso que o segundo card "Tipo de Devolução" apareça em todas as atividades.

compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags input javascript formulario ou faça a sua própria pergunta.