我正在循环浏览一些问题以在页面上打印出来,每个问题需要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代码,你可以看到他做了一切来隐藏无线电圈.你最终只能看到标签. (当你点击漂亮的收音机时,你点击看起来漂亮的标签)