foreach 中的两个不同单选按钮作为一个按钮工作

Question

我有这个带有 5 星评级（单选按钮）的代码，可用于两个不同的问题。

问题是：每个问题的两个评分是合二为一的。我的意思是，如果我在第二个问题中进行选择时在第一个问题中选择了某些内容，它会在第一个问题中取消选择。它作为一个独特的单选按钮工作。

我该如何解决？我错过了什么？

           @foreach (var pergunta in Model.ls_pergunta)
            {
                <div class="form-group has-feedback">
                    <div class="col-xs-12">
                        <label for="co_pergunta_avaliacao" class="control-label">@pergunta.tx_pergunta</label>
                    </div>
                    <div class="col-xs-8">
                        <div class="estrelas" id="pergunta_@pergunta.co_pergunta">
                            @{
                                int i = 1;
                                foreach (var item in @pergunta.ls_opcoes)
                                {
                                    <label for="cm_star-@i"><i class="fa"></i></label>
                                        <input type="radio" id="cm_star-@i" name="pergunta_@pergunta.co_pergunta" value=@item.Value />
                                    i++;
                                }
                            }
                        </div>
                    </div>
                </div>

.estrelas input[type=radio] {
  display: none;
}
.estrelas label i.fa:before {
  content:'\f005';
  color: #FC0;
  font-size:40px;
}
.estrelas input[type=radio]:checked ~ label i.fa:before {
  color: #CCC;
}

我按照收到的说明进行操作，但没有成功。下面我贴出查看源代码：

<div class="form-group has-feedback">
                    <div class="col-xs-12">
                        <label for="co_pergunta_avaliacao" class="control-label">ASPECTOS FORMAIS/GRAMATICAIS</label>
                                                
                    </div>
                    <div class="col-xs-8 estrelas" id="pergunta_1">
                        
                            <label for="cm_star-1"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-1" name="pergunta_1" value=1_1 />
                            <label for="cm_star-2"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-2" name="pergunta_1" value=1_2 />
                            <label for="cm_star-3"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-3" name="pergunta_1" value=1_3 />
                            <label for="cm_star-4"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-4" name="pergunta_1" value=1_4 />
                            <label for="cm_star-5"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-5" name="pergunta_1" value=1_5 />
                                   </div>

                </div>
                <div class="form-group has-feedback">
                    <div class="col-xs-12">
                        <label for="co_pergunta_avaliacao" class="control-label">CONTE&#218;DO/ARGUMENTA&#199;&#195;O</label>
          
                    </div>
                    <div class="col-xs-8 estrelas" id="pergunta_2">
                        <label for="cm_star-1"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-1" name="pergunta_2" value=2_1 />
                            <label for="cm_star-2"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-2" name="pergunta_2" value=2_2 />
                            <label for="cm_star-3"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-3" name="pergunta_2" value=2_3 />
                            <label for="cm_star-4"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-4" name="pergunta_2" value=2_4 />
                            <label for="cm_star-5"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-5" name="pergunta_2" value=2_5 />

                     </div>
                </div>

Answer 1

在 HTML 中，您可以通过为它们赋予相同的name 属性来创建一组相关的单选按钮。

演示：

Group 1:
<input type="radio" name="group1" value=1 />1
<input type="radio" name="group1" value=2 />2
<input type="radio" name="group1" value=3 />3
<input type="radio" name="group1" value=4 />4
<br/>
Group 2:
<input type="radio" name="group2" value=1 />1
<input type="radio" name="group2" value=2 />2
<input type="radio" name="group2" value=3 />3
<input type="radio" name="group2" value=4 />4

因此，在您的情况下，您将不得不更改 name="fb"，每次呈现新问题时都要更改它。

如果name 与您希望在提交表单时映射到的视图模型中的字段名称相匹配，这也是有意义的。