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 事件的通用事件的主要内容,如果未能解决你的问题,请参考以下文章