show and hide when radio button is clicked

Question

I have a radio button

@Html.RadioButtonFor(model => model.flag, "RA", htmlAttributes: new { @id = "Roflag2", })
Call for Addl. Particulars   

and a div

IF radio button is clicked then this div shown otherwise hide,

How can i do this?

Ali Benchaaban · Answer

Hello,
Use this code within your ASP.NET code


    @Html.RadioButtonFor(model => model.flag, "RA", new { id = "Roflag2" })
    <label for="Roflag2">Call for Addl. Particulars</label>

    <div class="row" id="callfor" style="display: none;">
        This is the content inside the div.
    </div>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initially hide the div
            $('#callfor').hide();

            // Listen for change event on radio button
            $('#Roflag2').change(function() {
                // Check if the radio button is checked
                if ($(this).is(':checked')) {
                    // Show the div if radio button is checked
                    $('#callfor').show();
                } else {
                    // Hide the div if radio button is not checked
                    $('#callfor').hide();
                }
            });
        });
    </script>
}

Regards,
BENCHAABAN Ali

Naimish Makwana · Answer

You can use jQuery to achieve this. Here’s a simple example:

$(document).ready(function() {
    $('#Roflag2').change(function() {
        if(this.checked) {
            $('#callfor').show();
        } else {
            $('#callfor').hide();
        }
    });
});

In this code, we’re using the change event to detect when the radio button’s state changes. If the radio button is checked (this.checked is true), we show the div with $('#callfor').show(). If the radio button is not checked, we hide the div with $('#callfor').hide().

Please note that this code assumes that you have included the jQuery library in your project. If you haven’t, you can include it with the following line in your HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

This line should be placed in the <head> section of your HTML file. If you’re already using a different version of jQuery, you don’t need to include this line.

Also, please ensure that the radio button and the div have the correct ids (Roflag2 and callfor respectively) as specified in the jQuery selectors ($('#Roflag2') and $('#callfor')). If the ids are different, you should replace Roflag2 and callfor with the actual ids.

This code should be placed in a <script> tag either in the <head> section (if you’re using $(document).ready()) or at the end of the <body> section of your HTML file.

Remember to test this code thoroughly to ensure it works as expected in your specific application context. Let me know if you have any questions!

Thanks

Garima Bansal · Answer

below is the div @if (Model.remarkscrunity == "Y") { @Html.ActionLink("General Remarks", "remarkscrunity", "Inspection", new { @applnno = Model.applnno }, htmlAttributes: new { @class = "btn btn-orange turbolinks", style = "font-size: 18px", @HttpMethodConstraint = "Post" }) &#10004; } else { @Html.ActionLink("General Remarks", "remarkscrunity", "Inspection", new { @applnno = Model.applnno }, htmlAttributes: new { @class = "btn btn-orange turbolinks", style = "font-size: 18px", @HttpMethodConstraint = "Post" }) }

show and hide when radio button is clicked

Answers (3)