show and hide when radio button is clicked

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?

@Html.RadioButtonFor(model => model.flag, "RA", new { id = "Roflag2" }) Call for Addl. Particulars This is the content inside the div. @section Scripts { }

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:

This line should be placed in the 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

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ali Benchaaban2y ago

Accepted answer

Hello,
Use this code within your ASP.NET code

Regards,
BENCHAABAN Ali

Naimish Makwana2y ago
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:
This line should be placed in the 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