Css适用于第一个无线电集，但不适用于第二个无线电集

Question

我正在尝试制作一个带有许多问题和是或否答案的测验应用程序。

所以我做了一个设计，使一个单选按钮看起来像一个按钮，如果被选中，它会被选中。

我还使用javascript为这些问题制作了一个滑动条。

所以问题是选中的设计对滑块中的第一个问题有效，但对其他问题不起作用。

这是我的代码，我不认为在JS的错误，但我包括它无论如何。

const myslide = document.querySelectorAll('.myslide'),
dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8000);
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function resetTimer() {
clearInterval(timer);
timer = setInterval(autoSlide, 8000);
}
function slidefun(n) {

let i;
for(i = 0;i<myslide.length;i++){
myslide[i].style.display = "none";
}
for(i = 0;i<dot.length;i++) {
dot[i].className = dot[i].className.replace(' active', '');
}
if(n > myslide.length){
counter = 1;
}
if(n < 1){
counter = myslide.length;
}
myslide[counter - 1].style.display = "block";
dot[counter - 1].className += " active";
}

.txt input[type="radio"] {
opacity:0.011;
z-index:100;

}
.txt label {
padding:5px;

border:1px solid #000;
border-radius:10px; 
cursor:pointer;


}
.txt label:hover {
background: rgb(238, 255, 5);
}

input[type="radio"]:checked + label {
background:yellow;
}

<div class="myslide fade">
<div class="txt">
<p>What is the question two ?</p>
<input id="yes" type='radio' name="result" value="yes">
<label for="yes">Yes</label>
<br> 
<input id="no" type='radio' name="result" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>What is the question one ?</p>
<input id="yes" type='radio' name="Question1" value="yes">
<label for="yes">Yes</label>
<br> 
<input id="no" type='radio' name="Question1" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>

Thanks in advance

Answer 1

问题是您的无线电输入不能具有相同的id，并且标签针对这些相同的id。id应该是DOM中唯一的出现，标签也应该引用这些唯一出现。因此，您需要改变输入的id和标签的for，以使它们相互关联。

例如，将它们更改为"yes1 &no . 1和yes . 2 &no2"。这应该可以解决您的问题:

<p>What is the question one ?</p>
<input id="yes1" type='radio' name="Question1" value="yes">
<label for="yes1">Yes</label>
<br> 
<input id="no1" type='radio' name="Question1" value="no">
<label for="no1">No</label>

和

<p>What is the question two ?</p>
<input id="yes2" type='radio' name="result" value="yes">
<label for="yes2">Yes</label>
<br> 
<input id="no2" type='radio' name="result" value="no">
<label for="no2">No</label>