Javascript 如何在单击按钮后使用jQuery仅显示一个div

我有两个div，在CSS上有一个

显示：none

。此外，我还有一个按钮的jQuery代码，当单击该按钮时，将显示其中一个div。这取决于

输入type='radio'

中是否有一个是

：检查
。为此，我有八个输入收音机，如果检查了正确的，它应该显示#msgCmnhCer消息。否则，如果检查了错误的输入，则必须显示#msgCmnhErr消息

问题是：当我选择错误的输入时，错误消息会按预期显示。但是，当我选择正确的输入时，两个div都会出现

我试着用jQuery来实现它。代码如下

$("#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);

    }
});

下面是这些消息的HTML代码

                <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>



你说对了！


再试一次。


以下是输入按钮代码：

      <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>


赖特
左边
向前地
在…的后面
(2)
(3)
(4)
(5)

如果检查了正确的输入，而没有错误消息，我如何才能只显示正确的消息？
if条件的代码不可能为false和true。代码不会在同一个过程中同时执行两个代码块。这里可能发生两件事之一：

（1） 在某个地方，$（“#exec”）.click（…）被多次触发，不知何故，if条件第一次为true，第二次为false

（2） 您第一次单击它时，if条件为true，然后您没有等待淡出，当if条件为false时，您会再次快速单击

似乎你实际上指的是复选框，而不是无线电框




你说对了！


再试一次。

男性

女性

其他
点击我
我假设这两个单选按钮属于不同的组，因此可以同时选择这两个按钮。如果它们是同一问题/组的一部分，则条件将始终为false，因为在任何时间点只能选择一次

您没有提供确切的HTML结构，因此我使用一些伪HTML快速创建了一个JSFIDLE。在示例中，javascript对我来说工作正常：

JS代码：

$("#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);
      }
});

我假设这两个单选按钮是不同组的一部分，因此可以同时选择这两个按钮，目的是验证其中两个输入按钮。如果他们被检查，正确的信息应该会出现，正如我在他的安全套上向c0mmand解释的那样。如果我不是那么清楚，我很抱歉。我有两组四个输入。
.frenteF1
和
.andar5F1
属于同一组。如果选择了这两个选项，则应显示消息“You got it”。否则，将显示“重试”消息。再试一次很好，但另一次不行；它同时显示这两条消息。您需要确保这两条消息都有不同的“name”值。如果有，它们都应该是可选的。既然你已经测试过了，我想他们都可以选择。您可以看看JSFIDLE，或者发布raido按钮部分的html吗？我用输入代码编辑了这个问题。
$("#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);
      }
});