Show Hide UserControl based on ASP.Net RadioButtonList selection using jQuery

nauna
 
on Jul 20, 2022 04:46 AM
Sample_761900.zip
355 Views

I have this RadioButtonList, i want when selected value is Yes so user control below shows else it becomes hide in jQuery.

<asp:RadioButtonList ID="RadioButtonList1" runat="server"  RepeatDirection="Horizontal">
    <asp:ListItem Selected="True">No</asp:ListItem>
    <asp:ListItem>Yes</asp:ListItem>
</asp:RadioButtonList>

 

<uc1:question_multifileupload runat="server" ID="question_multifileupload" Visible="false" />

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 20, 2022 08:36 AM
on Jul 20, 2022 08:36 AM

Hi nauna,

Place the UserControl inside a HTML DIV and make the DIV show hide based on the RadioButton selection.

Check the below example.

UserControl

Passport Number:   
<input type="text" id="txtPassportNumber" />

HTML

<span>Do you have Passport?</span>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Selected="True">Yes</asp:ListItem>
    <asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
<hr />
<div class="dvPassport">
    <uc1:WebUserControl runat="server" ID="WebUserControl" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("input[name='RadioButtonList1']").click(function () {
            if ($("input[value='Yes']").is(":checked")) {
                $(".dvPassport").show();
            } else {
                $(".dvPassport").hide();
            }
        });
    });
</script>

Screenshot