通过在MVC4中选择radiobutton的文本,是否可以淡入淡出?

时间:2016-05-23 10:38:46

标签: javascript jquery html asp.net-mvc-4

嗨是否可以通过选择单选按钮的文本来淡入和淡出。我会清楚地解释我的问题。

我的收音机按钮

我在访问类型中有两个单选按钮。

enter image description here

淡入淡出字段

enter image description here

如果我选择访问类型作为直接访问,它将显示 StartTime EndTime ,否则它不会显示这些两个领域。现在一切正常。现在我想要的是我想通过选择单选按钮的文本来显示字段

选择文字 enter image description here

如果我去点击文本(即直接访问不在单选按钮圈内),它会自动在圆圈内选择并且必须显示字段(开始时间和结束时间)。我试着根据我的水平最好地解释我的问题。请任何人告诉我可以通过选择mvc4

中的单选按钮文本来显示字段

我的观看代码

   <div class="col-sm-4" id="VisitType">
   <div class="form-group">
   <span style="color: #f00">*</span>
   @Html.Label("Visit Type", new { @class = "control-label" })
   @Html.RadioButtonFor(model => model.VisitType, "true", new { id = "" }) Telephone
   @Html.RadioButtonFor(model => model.VisitType, "false", new { id = "" }) Direct Visit

   </div>
   </div>

  <div id="StartTime">
  <div class="col-sm-3">
   <div class="form-group">
   @Html.Label("Start Time", new { @class = "control-label" })
   @Html.TextBoxFor(model => model.StartTime, new { @class = "form-control ", type = "text" })
   @Html.ValidationMessageFor(model => model.StartTime)
   </div>
   </div>

   <div class="col-sm-3">
   <div class="form-group">
    @Html.Label("End Time", new { @class = "control-label" })
    @Html.TextBoxFor(model => model.EndTime, new { @class = "form-control ", type = "text" })
    @Html.ValidationMessageFor(model => model.EndTime)
   </div>
   </div>
   </div>

我的J-query代码

      $(document).ready(function () {
            $('#StartTime').hide();
            $('#VisitType input[type="radio"]').change(function () {
                if ($(this).val() === 'false') {
                    $('#StartTime').show();
                }
                else 
                {
                    $('#StartTime').hide();
                }
            });
        });

2 个答案:

答案 0 :(得分:1)

我不认识asp.net。但我明白你想要的是什么。所以,我只是给你一个想法。在HTML中,您可以像这样使用。

Visit Type
<label for="telephone">Telephone</label>
<input type="radio" id="telephone">

现在,如果您直接点击电话标签而非单选按钮,则会自动选择单选按钮而不单击该按钮。

我希望这个解决方案可以帮到你。

答案 1 :(得分:1)

问题是您必须将标签中的单选按钮括起来。试试吧!

<div class="col-sm-4" id="VisitType">
           <div class="form-group">
           <span style="color: #f00">*</span>
           <label>
           @Html.RadioButtonFor(model => model.VisitType, "true", new { id = "" }) 
    Telephone
     </label>
    <label>
           @Html.RadioButtonFor(model => model.VisitType, "false", new { id = "" }) 
    Direct Visit
        </label>
           </div>
           </div>

您也可以使用label而不是span。