单选按钮文本点击结果错误答案

Question

当我点击第二个和第三个问题的“不想说”的文本时，第一个问题的答案变成了“不想说”。当我点击第三题'other'的文字时，第二题的答案变成了'other'。在这两种情况下，当我单击文本时，第三个问题的 'other' 和 'prefer not to say' 都不检查。这段代码有什么问题？

单击单选按钮时运行良好。

<div>
                        <p><strong>1. What is your age?</strong></p>
                        <input type="radio" id="Under18" name="h11" value="Under18">
                        <label for="Under18">Under 18</label><br>
                        <input type="radio" id="18-25" name="h11" value="18-25">
                        <label for="18-25">18 - 25</label><br>
                        <input type="radio" id="26-35" name="h11" value="26-35">
                        <label for="26-35">26 - 35</label><br>
                        <input type="radio" id="46-55" name="h11" value="46-55">
                        <label for="46-55">46 - 55</label><br>
                        <input type="radio" id="Over55" name="h11" value="Over55">
                        <label for="Over55">Over 55</label><br>
                        <input type="radio" id="Prefer not to say" name="h11" value="Prefer not to say">
                        <label for="Prefer not to say">Prefer not to say</label>
                    </div>
            
                    <div>
                        <p><strong>2. What is your gender?</strong></p>
                        <input type="radio" id="Female" name="h12" value="Female">
                        <label for="Female">Female</label><br>
                        <input type="radio" id="Male" name="h12" value="Male">
                        <label for="Male">Male</label><br>
                        <input type="radio" id="Other" name="h12" value="Other">
                        <label for="Other">Other</label><br>
                        <input type="radio" id="Prefer not to say" name="h12" value="Prefer not to say">
                        <label for="Prefer not to say">Prefer not to say</label>
                    </div>
            
                    <div>
                        <p><strong>3. What is your ethnicity?</strong></p>
                        <input type="radio" id="White/Caucasian" name="h13" value="White/Caucasian">
                        <label for="White/Caucasian">White/Caucasian</label><br>
                        <input type="radio" id="Hispanic/Latino" name="h13" value="Hispanic/Latino">
                        <label for="Hispanic/Latino">Hispanic/Latino</label><br>
                        <input type="radio" id="Black/African American" name="h13" value="Black/African American">
                        <label for="Black/African American">Black/African American</label><br>
                        <input type="radio" id="Asian/Pacific Islander" name="h13" value="Asian/Pacific Islander">
                        <label for="Asian/Pacific Islander">Asian/Pacific Islander</label><br>
                        <input type="radio" id="Native American/American Indian" name="h13" value="Native American/American Indian">
                        <label for="Native American/American Indian">Native American/American Indian</label><br>
                        <input type="radio" id="Other" name="h13" value="Other">
                        <label for="Other">Other</label><br>
                        <input type="radio" id="Prefer not to say" name="h13" value="Prefer not to say">
                        <label for="Prefer not to say">Prefer not to say</label>
                    </div>

Answer 1

ID 在 DOM 中是全局的。

您的标签以 ID 为“Prefer not to say”的控件为目标，因此 ID 与标签中的 for 属性匹配的第一个控件被激活。

为 ID 和属性添加 1、2、3 等...

Answer 2

这是因为你的radio inputs有相同的ID。

每个元素都需要具有唯一性 ID，因此只需更改其中一些元素就可以了。别忘了更新您的 for 属性。

单选按钮文本点击结果错误答案

Radio button text click result wrong answer

html

radio-button