jquery 中所有 Radiobuttonlist 事件的通用事件

Question

我有一个 MVC 应用程序表单，其中包含多个 Razor 控件，其中一个是单选按钮列表。此控件类似于 Yes/No 问题，在 Yes.

的情况下具有额外的详细信息（文本区域）

最初所有的文本区域都通过对其应用了一个共同的 class(applicant__additional-details) 来隐藏。我需要为所有单选按钮列表事件编写一个通用事件，选中 Yes 将打开文本区域以输入其他详细信息。我可以轻松地为每个单选按钮列表编写更改事件，但该方法的问题是该表单有超过 15+ Yes/No 个问题，因此需要编写一个通用的单选按钮列表事件，单击该事件将打开最近的div(applicant__additional-details)。以下是带有附加详细信息文本区域的单选按钮列表问题 1 的示例。

<div class="row">
    <div class="col-sm-9">
        <legend class="applicant__question">
             Have you operated under a different DOT# in the past 5 years
        </legend>
    </div>
    <div class="col-sm-3">
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, true, new { id = "HasOperatedUnderDifferentDotNumberYes" })
            <label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
        </div>
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, false, new { id = "HasOperatedUnderDifferentDotNumberNo" })
            <label for="HasOperatedUnderDifferentDotNumberNo">No</label>
        </div>
            @Html.ValidationMessageFor(model => model.HasOperatedUnderDifferentDotNumber, "", new { @class = "text-danger" })
    <div class="applicant__additional-details row">
            <label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
            @Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
            @Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, "", new { @class = "text-danger" })
    </div>
    </div>
</div>

以上任何建议都会有所帮助。问候。

Answer 1

这是一个演示：

型号class：

        public int HasOperatedUnderDifferentDotNumber { get; set; }
        public string OperatedUnderDifferentDotNumberAdditionalDetail { get; set; }
        public int HasOperatedUnderDifferentDotNumber1 { get; set; }
        public string OperatedUnderDifferentDotNumberAdditionalDetail1 { get; set; }

查看：

<div class="row">
    <div class="col-sm-9">
        <legend class="applicant__question">
            Question1:Have you operated under a different DOT# in the past 5 years
        </legend>
    </div>
    <div class="col-sm-3">
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, true, new { id = "HasOperatedUnderDifferentDotNumberYes"})
            <label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
        </div>
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, false, new { id = "HasOperatedUnderDifferentDotNumberNo" })
            <label for="HasOperatedUnderDifferentDotNumberNo">No</label>
        </div>

        <div class="applicant__additional-details row" hidden>
            <label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
            @Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
            @Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, "", new { @class = "text-danger" })
        </div>
    </div>
  
</div>
<div class="row">
    <div class="col-sm-9">
        <legend class="applicant__question">
            Question2:Have you operated under a different DOT# in the past 5 years
        </legend>
    </div>
    <div class="col-sm-3">
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber1, true, new { id = "HasOperatedUnderDifferentDotNumberYes1" })
            <label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
        </div>
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber1, false, new { id = "HasOperatedUnderDifferentDotNumberNo1" })
            <label for="HasOperatedUnderDifferentDotNumberNo">No</label>
        </div>

        <div class="applicant__additional-details row" hidden>
            <label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
            @Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail1, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
            @Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail1, "", new { @class = "text-danger" })
        </div>
    </div>
 </div>

jquery:

$('input[type=radio]').change(function () {
                if ($(this).is(":checked") == true && $(this).val() == "True") {
                    $(this).closest("div").nextAll('div.applicant__additional-details').removeAttr("hidden");
                } else {
                    $(this).closest("div").nextAll('div.applicant__additional-details').attr("hidden", true);
                }
            });

结果：

jquery 中所有 Radiobuttonlist 事件的通用事件

Generic event for all the Radiobuttonlist event in jquery

jquery

asp.net-mvc

asp.net-core

razor

radiobuttonlist