How to show only one div with jQuery after clicking on a button

Question

I have two divs which have a display: none on CSS. Also, I have a jQuery code to a button, which when is clicked, will show one of the divs. It depends if one of the input type='radio' is :check . For this, I have eight input radios and if the correct ones are checked, It is supposed to show the #msgCmnhCer message. Else, if the wrong inputs are checked, It have to show the #msgCmnhErr message.

The problem is: when I select the wrong inputs, the error message appears as expected. But, when I select the correct inputs, both of the divs appears.

I tried to do it with jQuery. The code is below

$("#exec").click(function(){

    // frenteF1 and andar5F1 are the IDs of the correct inputs. below is to show the correct message
    if(($('.frenteF1').is(':checked')) && ($('.andar5F1').is(':checked'))){
        $("#msgCmnhCer").css("display", "block");
        $('#msgCmnhCer').fadeOut(4500);
    }
    // error message
    else{
        $('#msgCmnhErr').css("display", "block");
        $('#msgCmnhErr').fadeOut(4500);

    }
});

Here is the HTML code of the messages

                <div id="msgCmnhCer" class="msg-cmnh-certo">
                    <p>
                        You got it!
                    </p>
                </div>
                <div id="msgCmnhErr" class="msg-cmnh-errado">
                    <p>
                        Try again.
                    </p>
                </div>

Here are the input buttons code:

      <div class="qst1">
         <input type="radio" name="imagem" id="d1" class="input-fase1 direitaF1"/>
         <label for="d1" class="label-fase1 prgt-medieval">Right</label>
                                
         <input type="radio" name="imagem" id="d2" class="input-fase1 esquerdaF1"/>
         <label for="d2" class="label-fase1 prgt-medieval">Left</label>
                                
         <input type="radio" name="imagem" id="d3" class="input-fase1 frenteF1"/>
         <label for="d3" class="label-fase1 prgt-medieval">Ahead</label>
                                
         <input type="radio" name="imagem" id="d4" class="input-fase1 trasF1"/>
         <label for="d4" class="label-fase1 prgt-medieval">Behind</label>
      </div>
            
      <div class="qst1">
         <input type="radio" value="andar1" name="image" id="a1" class="input-fase1 andar2F1"/>
         <label for="a1" class="label-fase1 prgt-medieval">(2)</label>
                                
         <input type="radio" name="image" id="a2" class="input-fase1 andar3F2"/>
         <label for="a2" class="label-fase1 prgt-medieval"> (3)</label>
                                
         <input type="radio" name="image" id="a3" class="input-fase1 andar4F1"/>
         <label for="a3" class="label-fase1 prgt-medieval"> (4)</label>
                                
         <input type="radio" name="image" id="a4" class="input-fase1 andar5F1"/>
         <label for="a4" class="label-fase1 prgt-medieval"> (5)</label>
      </div>

How could I make only the correct message appear if the right inputs are checked, without the error message?

Answer 1

It is impossible for the code for the if condition to be false AND true. The code will not execute both code blocks on the same pass. One of two things may be happening here:

(1) Somewhere, $("#exec").click(...) is triggered more than once, and somehow the if condition is true the first time and false the second time.

(2) You clicked it the first time and the if condition was true, then you didn't wait for the fadeout and clicked again quickly when the if condition was false.

It seems that you may be actually referring to checkboxes, not radio boxes.

https://jsfiddle.net/3v0bxqsw/

 <div id="msgCmnhCer" class="msg-cmnh">
   <p>
     You got it!
   </p>
 </div>
 <div id="msgCmnhErr" class="msg-cmnh">
   <p>
     Try again.
   </p>
 </div>
 
<input type="checkbox" class='andar5F1' id="male" name="gender" value="male" />
<label for="male">Male</label><br>
<input type="checkbox" id="female" class='frenteF1' name="gender" value="female" />
<label for="female">Female</label><br>
<input type="checkbox" id="other" name="gender" value="other" />
<label for="other">Other</label>
<button id="exec">
Click me
</button>

Answer 2

I'm assuming that the two radio buttons are part of different groups, and hence both can be selected at the same time. If they are part of the same question/group, the condition would always be false, as only once can be selected at any point in time.

You didn't provide the exact HTML structure, so I made a quick JSFiddle with some dummy html. The javascript works correctly for me in the example: https://jsfiddle.net/7m5L6yqo/13/

JS Code:

$("#exec").click(function() {
      if ((($('.frenteF1').is(':checked')) && ($('.andar5F1').is(':checked')))) {
        $("#msgCmnhCer").css("display", "block");
        $('#msgCmnhCer').fadeOut(4500);
      }
      else {
        $('#msgCmnhErr').css("display", "block");
        $('#msgCmnhErr').fadeOut(4500);
      }
});