Versão atual:

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.

Versões (4):

Ver a versão formatada

Input exibe/oculta card.

Comentário

new question