html – 具有分组的MVC循环RadioButtonList样式

我正在循环浏览一些问题以在页面上打印出来,每个问题需要5个编号为0到5的单选按钮.

目前他们按预期工作(如果有点粗糙)
像这样：

<table>
<tr>
@for (int i = 0; i < Model.Questions.Count; i++)
        { <td style="width:80px; padding-left: 10px;">
                    <label for="q1-0" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer,"0") 0</label>
                </td>
                @*middle*@
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-1" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer,"1") 1</label>
                </td>
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-2" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer,"2") 2</label>
                </td>
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-3" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer,"3") 3</label>
                </td>
                @*last*@
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-4" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer,"4") 4</label>
                </td>
            </tr>
        }
    </table>

我想要做的是添加一些像cssCheckBox.com那样的样式

但是,当我使用该示例尝试此操作时,分组不再有效,例如按checkBox_2,checkBox_3或checkBox_1始终会导致checkBox_0被检查…

我已经尝试过使用(mvc)LabelFor,但这不起作用,假设所有复选框的id都是相同的.

<td style="width:80px; padding-left: 10px;">
@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer,"1",new { @class = "css-checkBox" })
@Html.LabelFor(m => m.PatientQuestions[i].Answer,new { @class = "css-label" })
</td>

任何关于如何使用单选按钮列表进行样式/分组的想法都会很棒.

解决方法

问题是,对于一个问题,所有答案都有相同的ID,为了解决这个问题,您需要为每个答案生成唯一ID.基于您的代码的解决方案如下所示.

<table>
    @for (int i = 0; i < Model.Questions.Count; i++)
    {
        <tr>
            @{
                int answersCount = 5;
                for (int answerIndex = 0; answerIndex < answersCount; answerIndex++)
                {
                    var answerId = String.Format("Question_{0}_{1}",i,answerIndex);
                    <td style="width: 80px; padding-left: 10px;">
                        @Html.RadioButtonFor(m => m.PatientQuestions[i].Answer,answerIndex.ToString(),new { @class = "css-checkBox",@id = answerId })
                        @Html.LabelFor(m => m.PatientQuestions[i].Answer,new { @class = "css-label",@for = answerId })
                    </td>
                }
            }
        </tr>
    }
</table>

有什么不同？

问题：让我们看看原始的HTML代码.

<td style="width:80px; padding-left: 10px;">
    <input class="css-checkBox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="1" type="radio">
    <label class="css-label" for="PatientQuestions_0__Answer">1</label>
</td>

<td style="width:80px; padding-left: 10px;">
    <input class="css-checkBox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="2" type="radio">
    <label class="css-label" for="PatientQuestions_0__Answer">2</label>
</td>
 ....

input[type=radio].css-checkBox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
input[type=radio].css-checkBox + label.css-label {
  padding-left: 20px;
  height: 15px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}
input[type=radio].css-checkBox:checked + label.css-label {
  background-position: 0 -15px;
}
label.css-label {
  background-image: url(http://csscheckBox.com/checkBoxes/u/csscheckBox_7d1e967c68c39221a9ad8a026a805769.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<table>
  <tr>
    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkBox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="1" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">1</label>
    </td>

    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkBox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="2" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">2</label>
    </td>
    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkBox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="3" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">3</label>
    </td>
    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkBox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="4" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">4</label>
    </td>

    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkBox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="5" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">5</label>
    </td>
  </tr>
</table>

我们注意到,组中的所有单选按钮都具有id = PatientQuestions_0__Answer,相同.标签是= PatientQuestions_0__同样也是相同的ID.这意味着当您单击标签时,会选择具有相应ID的输入,但所有输入都具有相同的ID,这就是为什么只选择第一个.

解决方案：我建议的解决方案为每个单选按钮创建一个唯一的ID.

<td style="width: 80px; padding-left: 10px;">
    <input class="css-checkBox" id="Question_0_0" name="PatientQuestions[0].Answer" value="0" type="radio">
    <label class="css-label" for="Question_0_0">0</label>
</td>
<td style="width: 80px; padding-left: 10px;">
    <input class="css-checkBox" id="Question_0_1" name="PatientQuestions[0].Answer" value="1" type="radio">
    <label class="css-label" for="Question_0_1">1</label>
</td>
....

input[type=radio].css-checkBox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
input[type=radio].css-checkBox + label.css-label {
  padding-left: 20px;
  height: 15px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}
input[type=radio].css-checkBox:checked + label.css-label {
  background-position: 0 -15px;
}
label.css-label {
  background-image: url(http://csscheckBox.com/checkBoxes/u/csscheckBox_7d1e967c68c39221a9ad8a026a805769.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<table>
  <tr>
                        <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkBox" id="Question_0_0" name="PatientQuestions[0].Answer" value="0" type="radio">
                        <label class="css-label" for="Question_0_0">0</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkBox" id="Question_0_1" name="PatientQuestions[0].Answer" value="1" type="radio">
                        <label class="css-label" for="Question_0_1">1</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkBox" id="Question_0_2" name="PatientQuestions[0].Answer" value="2" type="radio">
                        <label class="css-label" for="Question_0_2">2</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkBox" id="Question_0_3" name="PatientQuestions[0].Answer" value="3" type="radio">
                        <label class="css-label" for="Question_0_3">3</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkBox" id="Question_0_4" name="PatientQuestions[0].Answer" value="4" type="radio">
                        <label class="css-label" for="Question_0_4">4</label>
                    </td>
  </tr>
</table>

我们可以注意到每个id都是唯一的,标签指向正确的单选按钮.

为什么我需要一个唯一的ID,正常版本不需要它？如果你查看.css-checkBox的css代码,你可以看到他做了一切来隐藏无线电圈.你最终只能看到标签. (当你点击漂亮的收音机时,你点击看起来漂亮的标签)