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

Posted

技术标签:

【中文标题】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);
                
            );

结果:

【讨论】:

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

以上是关于jquery 中所有 Radiobuttonlist 事件的通用事件的主要内容,如果未能解决你的问题,请参考以下文章

“所有但不是”jQuery 选择器

jquery中怎么样获取表单所有值

使用 Javascript/jQuery 从 HTML 元素中获取所有属性

jQuery函数从数组中获取所有唯一元素?

在 jQuery 验证中忽略所有隐藏的 div 但不是一个

使用 jquery 从选择下拉列表中删除所有条目的最简单方法是啥?