Generic event for all the Radiobuttonlist event in jquery

Question

I have an MVC application form with multiple razor controls one of them being radiobuttonlist. This control is similar to Yes/No questions with additional details (textarea) in case of Yes.

Initially all the textareas are hidden through a common class(applicant__additional-details) applied to it. I need to write a generic event for all the radiobutton list event which when Checked Yes will open the text area to input the additional details. I can easily write the change event for every radiobuttonlist but the issue with that approach is that the form has more than 15+ Yes/No questions & so is the need to write a generic radiobuttonlist event that when clicked will open up the closest div(applicant__additional-details). Below is an example of 1 of the radiobuttonlist question with additional-details textarea.

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

Any suggestion for the above will be helpful. Regards.

Yiyi You Yiyi You · Accepted Answer · 2020-12-07T03:27:15

Here is a demo:

Model class:

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

View:

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

result:

Generic event for all the Radiobuttonlist event in jquery

1 Answers