my if statement not work, and why radio button still checked after i reload the page?-CodePudding

```
var questlist=[];
while (questlist.length<3){
  var nextnumb=Math.floor(Math.random()*3) 1;
  var check=questlist.includes(nextnumb);
  if (check==false){
    questlist.push(nextnumb);
  }
}
console.log(questlist);
var i=0;
$(".start").click(function(){
  $(".q" questlist[i]).removeClass("hide");
  $(".start").addClass("hide");
});
$(".next").click(function(){
    $("body").removeAttr("class");
    $(".q" questlist[i]).addClass("hide");
    i  ;
    $(".q" questlist[i]).removeClass("hide");
    $(".next").addClass("hide");
    console.log(questlist[i]);
});

$(document).on("click",".submit", answer);

function answer() {
    if ($(".true").is(":checked")){
        $("body").attr("class","true");
        $(".next").removeClass("hide");
    }else if ($(".false").is(":checked")){
        $("body").attr("class","false");
    }else{
        alert("chose the answer");
    }
}
```

```
.true{
    background-color: lightgreen;
}
.false{
    background-color: red;
}
.hide{
    display: none;
}
```

```
<body>
    <button type="button"  name="btn-start">Start</button>
    <div >
        <div >2 2
            <div >
                <input type="radio" name="q1" >1
                <input type="radio" name="q1" >4
                <input type="radio" name="q1" >3
                <input type="radio" name="q1" >2<br>
                <button type="submit" name="Submit" >Submit</button>
                <button type="button"  name="next">Next</button>
            </div>
        </div>
        <div >2 3
            <div >
                <input type="radio" name="q2" >1
                <input type="radio" name="q2" >4
                <input type="radio" name="q2" >5
                <input type="radio" name="q2" >2<br>
                <button type="submit" name="Submit" >Submit</button>
                <button type="button"  name="next">Next</button>
            </div>
        </div>
        <div >2 4
            <div >
                <input type="radio" name="q3" >6
                <input type="radio" name="q3" >4
                <input type="radio" name="q3" >3
                <input type="radio" name="q3" >2<br>
                <button type="submit" name="Submit" >Submit</button>
                <button type="button"  name="next">Next</button>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="quiz.js"></script>
</body>
```

In first number the answer function is normal, but when it comes to next question, if i select the wrong answer, after i chose true answer in the first number, the body still turn to green and next button still appear. And when i reload the html the radio button is still checked, why all of that happen?

CodePudding user response：

The reason it happens is, that you are trying to get the class true, inside your if statement. jQuery will try to get the first element with the class true every time. therefore it will always check only the first element with the class true. One way to solve it is to detect the click event parent and find the child with the class true, and validate by this child.

function answer(e) {
  let rightAnswer = $(e.target).parent().find('.true')
    if (rightAnswer.is(":checked")){
        
        $("body").attr("class","true");
        $(".next").removeClass("hide");
    }else if ($(".false").is(":checked")){
        $("body").attr("class","false");
    }else{
        alert("chose the answer");
    }
}

working example - codepen.