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

概述我正在循环浏览一些问题以在页面上打印出来,每个问题需要5个编号为0到5的单选按钮. 目前他们按预期工作(如果有点粗糙) 像这样： <table><tr>@for (int i = 0; i < Model.Questions.Count; i++) { <td style="width:80px; padding-left: 10px;"> 我正在循环浏览一些问题以在页面上打印出来,每个问题需要5个编号为0到5的单选按钮.

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

<table><tr>@for (int i = 0; i < Model.Questions.Count; i++)        { <td >                    <label for="q1-0" >@HTML.RadiobuttonFor(m => m.PatIEntQuestions[i].Answer,"0") 0</label>                </td>                @*mIDdle*@                <td >                    <label for="q1-1" >@HTML.RadiobuttonFor(m => m.PatIEntQuestions[i].Answer,"1") 1</label>                </td>                <td >                    <label for="q1-2" >@HTML.RadiobuttonFor(m => m.PatIEntQuestions[i].Answer,"2") 2</label>                </td>                <td >                    <label for="q1-3" >@HTML.RadiobuttonFor(m => m.PatIEntQuestions[i].Answer,"3") 3</label>                </td>                @*last*@                <td >                    <label for="q1-4" >@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 >@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 >                        @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 >    <input  ID="PatIEntQuestions_0__Answer" name="PatIEntQuestions[0].Answer" value="1" type="radio">    <label  for="PatIEntQuestions_0__Answer">1</label></td><td >    <input  ID="PatIEntQuestions_0__Answer" name="PatIEntQuestions[0].Answer" value="2" type="radio">    <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 >      <input  ID="PatIEntQuestions_0__Answer" name="PatIEntQuestions[0].Answer" value="1" type="radio">      <label  for="PatIEntQuestions_0__Answer">1</label>    </td>    <td >      <input  ID="PatIEntQuestions_0__Answer" name="PatIEntQuestions[0].Answer" value="2" type="radio">      <label  for="PatIEntQuestions_0__Answer">2</label>    </td>    <td >      <input  ID="PatIEntQuestions_0__Answer" name="PatIEntQuestions[0].Answer" value="3" type="radio">      <label  for="PatIEntQuestions_0__Answer">3</label>    </td>    <td >      <input  ID="PatIEntQuestions_0__Answer" name="PatIEntQuestions[0].Answer" value="4" type="radio">      <label  for="PatIEntQuestions_0__Answer">4</label>    </td>    <td >      <input  ID="PatIEntQuestions_0__Answer" name="PatIEntQuestions[0].Answer" value="5" type="radio">      <label  for="PatIEntQuestions_0__Answer">5</label>    </td>  </tr></table>

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

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

<td >    <input  ID="Question_0_0" name="PatIEntQuestions[0].Answer" value="0" type="radio">    <label  for="Question_0_0">0</label></td><td >    <input  ID="Question_0_1" name="PatIEntQuestions[0].Answer" value="1" type="radio">    <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 >                        <input  ID="Question_0_0" name="PatIEntQuestions[0].Answer" value="0" type="radio">                        <label  for="Question_0_0">0</label>                    </td>                    <td >                        <input  ID="Question_0_1" name="PatIEntQuestions[0].Answer" value="1" type="radio">                        <label  for="Question_0_1">1</label>                    </td>                    <td >                        <input  ID="Question_0_2" name="PatIEntQuestions[0].Answer" value="2" type="radio">                        <label  for="Question_0_2">2</label>                    </td>                    <td >                        <input  ID="Question_0_3" name="PatIEntQuestions[0].Answer" value="3" type="radio">                        <label  for="Question_0_3">3</label>                    </td>                    <td >                        <input  ID="Question_0_4" name="PatIEntQuestions[0].Answer" value="4" type="radio">                        <label  for="Question_0_4">4</label>                    </td>  </tr></table>

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

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

总结

以上是内存溢出为你收集整理的html – 具有分组的MVC循环RadioButtonList样式全部内容，希望文章能够帮你解决html – 具有分组的MVC循环RadioButtonList样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。