javascript - MVC4中是否可以通过选择单选按钮的文本来淡入淡出？

Question

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

我的单选按钮

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

淡入淡出字段

如果我选择访问类型为直接访问，它将显示开始时间和结束时间，否则不会显示这些两个字段。现在一切都工作正常。现在我想要的是我也想通过选择单选按钮的文本来显示字段

选择文本

也就是说，如果我点击文本(即直接访问不在单选按钮圆圈内)，它会自动选择圆圈内，并且必须显示字段(开始时间和结束时间)。我试图根据我的水平最好地解释我的问题。请任何人告诉我可以通过选择 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();
                }
            });
        });

Answer 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>

您还可以使用标签代替跨度。