Show div only after checking 3 radio Buttons

Question

I got a problem I can’t fix.

I need a div to be shown ONLY after 3 radio Buttons have been checked, but it’s not working. I’m only getting through with one option, but it has to be the 3 at a time and only after the 3 one has to appear the div.

$(function() {
    $('.control').on('click', function(){
        var n1 = $('#profissional-nao:checked');
        var n2 = $('#institucionalizada-nao:checked');
        var n3 = $('#indigena-nao:checked');

        if(n1.length > 0 && n2.length > 0 && n3.length > 0) {
            document.getElementById("fase-dois").style.display = 'block';
        } else {
            document.getElementById("fase-dois").style.display = 'none';
        }
    });
});

<div class="">
    Profissional de Saúde: <br>
    <input id="profissional-sim" name="{$q2_name}" type="radio" value="Sim" checked="" class="form-control"> Sim
    <input id="profissional-nao" name="{$q2_name}" type="radio" value="Não" class="form-control control"> Não
</div>

<div class=""><br><br></div>

<div class="">
    Pessoa Institucionalizada?: <br>
    <input id="institucionalizada-sim" name="{$q3_name}" type="radio" checked="" value="Sim" class="form-control"> Sim
    <input id="institucionalizada-nao" name="{$q3_name}" type="radio" value="Não" class="form-control control"> Não
</div>

<div class=""><br><br></div>

<div class="argem">
    Poulação Indigena ou em Terras Demarcadas?: <br>
    <input id="indigena-sim" name="{$q4_name}" type="radio" value="Sim" checked="" class="form-control"> Sim
    <input id="indigena-nao" name="{$q4_name}" type="radio" value="Não" class="form-control control"> Não
</div>

<div class=""><br><br></div>

<div class="col-xs-12" id="fase-dois" style="display: none;">teste</div>

Answer 1

As mentioned by @Anthony-Accioly you need to listen to the click of all inputs to reevaluate every click of them.

Footsteps:

• You can do this, for example, by adding the class .control also to inputs 'yes'
• Separate into functions not to become repetitive
• Evaluate when loading the page whether to show or not (optional)

Link to codepen

$(function() {
    function isAllChecked () {
        // jQuery retorna um array com o element em si no index 0 (primeira posição)
        // Abaixo é array destructure para captar o primeiro item do array
        var [input1] = $('#profissional-nao');
        var [input2] = $('#institucionalizada-nao');
        var [input3] = $('#indigena-nao');

        // Checka se todos (e somente se todos) os inputs do array estão checked
        // Se sim, retorna true, se um ou mais não estiver, retorna false 
        return [input1, input2, input3].every(
            (input) => input.checked
        );
    }
    
    // Elemento a ser mostrado / escondido
    var element = $("#fase-dois");

    // Checar se todos estão marcados nao a cada clique
    // e mostrar / esconder elemento a partir da resposta de isAllChecked()
    $('.control').on('click', function() {
        // Usar método toggle passando true ou false
        // sendo true mostra o elemento e vice-versa
        element.toggle(isAllChecked());
    });

    // Opcional: Checar se já está marcado tudo em nao ao carregar a página
    // e mostrar a div caso positivo
    $(document).ready(function() {
        element.toggle(isAllChecked());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="">
    Profissional de Saúde: <br>
    <input id="profissional-sim" name="{$q2_name}" type="radio" value="Sim" checked="" class="form-control control"> Sim
    <input id="profissional-nao" name="{$q2_name}" type="radio" value="Não" class="form-control control"> Não
</div>

<div class=""><br><br></div>

<div class="">
    Pessoa Institucionalizada?: <br>
    <input id="institucionalizada-sim" name="{$q3_name}" type="radio" checked="" value="Sim" class="form-control control"> Sim
    <input id="institucionalizada-nao" name="{$q3_name}" type="radio" value="Não" class="form-control control"> Não
</div>

<div class=""><br><br></div>

<div class="argem">
    Poulação Indigena ou em Terras Demarcadas?: <br>
    <input id="indigena-sim" name="{$q4_name}" type="radio" value="Sim" checked="" class="form-control control"> Sim
    <input id="indigena-nao" name="{$q4_name}" type="radio" value="Não" class="form-control control"> Não
</div>

<div class=""><br><br></div>

<div class="col-xs-12" id="fase-dois" style="display: none;">teste</div>

Answer 2

You can modify your code so that the if be as follows:

if(document.getElementById('id-radio-1').checked && document.getElementById('id-radio-2').checked && document.getElementById('id-radio-3').checked){
      document.getElementById("fase-dois").style.display = 'block';
}else{
      document.getElementById("fase-dois").style.display = 'none';
} 

Remembering that you also need to modify the HTML so that the id’s match.

Answer 3

The only change I needed to make to your code for it to work was to change the Binding of Event Handler click to work with the class form-control (and thus treat clicks of all radio Buttons):

$(function() {
    $('.form-control').on('click', function(){
        var n1 = $('#profissional-nao:checked');
        var n2 = $('#institucionalizada-nao:checked');
        var n3 = $('#indigena-nao:checked');

        if(n1.length > 0 && n2.length > 0 && n3.length > 0) {
            document.getElementById("fase-dois").style.display = 'block';
        } else {
            document.getElementById("fase-dois").style.display = 'none';
        }
    });
});

See working on Jsfiddle.

It is important to listen for events of click in all the radio Buttons to hide the div if any option is exchanged Not for Yes.