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

Posted 2023-05-08

【中文标题】jquery 中所有 Radiobuttonlist 事件的通用事件

【英文标题】：Generic event for all the Radiobuttonlist event in jquery

【发布时间】：2021-03-16 16:34:31

【问题描述】：

我有一个 MVC 应用程序表单，其中包含多个剃须刀控件，其中一个是单选按钮列表。在是的情况下，此控件类似于带有附加详细信息的是/否问题（文本区域）。

最初，所有文本区域都通过应用到它的公共类（applicant__additional-details）隐藏。 我需要为所有radiobutton列表事件编写一般事件，当检查是 yes byst>时，将打开文本区域以输入其他详细信息。 我可以轻松地为每个单选按钮列表编写更改事件，但这种方法的问题是表单有超过 15 个是/否问题，因此需要编写一个通用单选按钮列表事件，单击该事件将打开最近的 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>

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

【参考方案1】：

这是一个演示：

模型类：

        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);
                
            );

结果：

【讨论】：

我正在寻找一个建议，你给了我完整的答案。非常感谢:)