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.