locked
Hide and show radiobutton RRS feed

  • Question

  • User-73514677 posted

    HI,

    I am using ASP.NET, C#, jQuery.

    In my aspx page, I have the following controls:

      <tr>
                            <td>
    <asp:Label ID="lblCtrlLogic" runat="server" Text="Are controls in place ?"></asp:Label>                        </td>
                            <td colspan="4" >
                                <asp:RadioButton ID="rdbCtrlLogicNo" runat="server" Text="No" />
                                <asp:RadioButton ID="rdbCtrlLogicYes" runat="server" Text="Yes" />
                                <asp:RadioButton ID="rdbCtrlLogicNA" runat="server" Text="N/A" />
                            </td>
                        </tr>
    
    <tr id="trAccessCtrl" class="trAccessCtrl" style="display: none;">
                            <td >
    <asp:Label ID="lblAccessCtrl" runat="server" Text="Manage control?"></asp:Label> </td>
                            <td colspan="4" >
                                <asp:RadioButton ID="rdbAccessCtrlNo" runat="server" Text="No" />
                                <asp:RadioButton ID="rdbAccessCtrlYes" runat="server" Text="Yes" />
                            </td>
     </tr>

    If radiobutton "rdbCtrlLogicYes" is selected, I want to display "trAccessCtrl". For "rdbCtrlLogicNo", "rdbCtrlLogicNA" and by default "trAccessCtrl" should be hidden.

    I have tried the below code, but it is not working. I mean, if i select option "Yes", the "trAccessCtrl" is not getting visible.

    Below is the code tried:

    if ($('#<%=rdbCtrlLogicNo.ClientID%>').is(':checked')) {
    
                $('#<%=rdbCtrlLogicYes.ClientID %>').attr('checked', false);
                $('#<%=rdbCtrlLogicNA.ClientID %>').attr('checked', false);
                $(".trAccessCtrl").hide();
            }
            else {
            }
    
            $('#<%=rdbCtrlLogicNo.ClientID%>').on("click", function () {
                if ($(this).is(":checked")) {
                    $('#<%=rdbCtrlLogicYes.ClientID %>').attr('checked', false);
                    $('#<%=rdbCtrlLogicNA.ClientID %>').attr('checked', false);
                    $(".trAccessCtrl").hide();
                }
                else {
                }
            });
    
            //yes
            if ($('#<%=rdbCtrlLogicYes.ClientID%>').is(':checked')) {
    
                $('#<%=rdbCtrlLogicNo.ClientID %>').attr('checked', false);
                $('#<%=rdbCtrlLogicNA.ClientID %>').attr('checked', false);
                $(".trAccessCtrl").show();
            }
            else {
            }
    
            $('#<%=rdbCtrlLogicYes.ClientID%>').on("click", function () {
                if ($(this).is(":checked")) {
                    $('#<%=rdbCtrlLogicNo.ClientID %>').attr('checked', false);
                    $('#<%=rdbCtrlLogicNA.ClientID %>').attr('checked', false);
                    $(".trAccessCtrl").show();
                }
                else {
                }
            });
            // NA
            if ($('#<%=rdbCtrlLogicNA.ClientID%>').is(':checked')) {
    
                $('#<%=rdbCtrlLogicYes.ClientID %>').attr('checked', false);
                $('#<%=rdbCtrlLogicNo.ClientID %>').attr('checked', false);
                $(".trAccessCtrl").hide();
            }
            else {
            }
    
            $('#<%=rdbCtrlLogicNA.ClientID%>').on("click", function () {
                if ($(this).is(":checked")) {
                    $('#<%=rdbCtrlLogicYes.ClientID %>').attr('checked', false);
                    $('#<%=rdbCtrlLogicNo.ClientID %>').attr('checked', false);
                    $(".trAccessCtrl").hide();
                }
                else {
                }
            });
    
            // sub access
            if ($('#<%=rdbAccessCtrlNo.ClientID%>').is(':checked')) {
                $('#<%=rdbAccessCtrlYes.ClientID %>').attr('checked', false);
            }
            else {
            }
    
            $('#<%=rdbAccessCtrlNo.ClientID%>').on("click", function () {
                if ($(this).is(":checked")) {
                    $('#<%=rdbAccessCtrlYes.ClientID %>').attr('checked', false);
                }
                else {
                }
            });
    
            if ($('#<%=rdbAccessCtrlYes.ClientID%>').is(':checked')) {
                $('#<%=rdbAccessCtrlNo.ClientID %>').attr('checked', false);
            }
            else {
            }
    
            $('#<%=rdbAccessCtrlYes.ClientID%>').on("click", function () {
                if ($(this).is(":checked")) {
                    $('#<%=rdbAccessCtrlNo.ClientID %>').attr('checked', false);
                }
                else {
                }
            });

    How to fix this?

    Thanks

    Sunday, June 19, 2016 6:17 AM

Answers

  • User475983607 posted

    Make the radios mutually exclusive by applying the GroupName attribute to the radio button.  This will reduce the amount of code you have to write to handle the selection.  Add a CssClass to the "logic" group.  Assign a click Jquery handler to the new CssClass and place your logic in the handler.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioButtontoogle.aspx.cs" Inherits="TestingWeb.jquery.RadioButtontoogle" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
                $('.logic').click(function () {
                    //Get the button value
                    var selectedRadio = $('input', this).val();
    
                    //Apply toggle logic
                    switch(selectedRadio)
                    {
                        case 'rdbCtrlLogicYes':
                            $('#trAccessCtrl').show();
                            break;
                        case 'rdbCtrlLogicNo':
                        case 'rdbCtrlLogicNA':
                            $('#trAccessCtrl').hide();
                            break;
                    }
                    
                });
            });
      
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table>
                    <tr>
                        <td>
                            <asp:Label ID="lblCtrlLogic" runat="server" Text="Are controls in place ?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbCtrlLogicNo" runat="server" Text="No" GroupName="logic" CssClass="logic" />
                            <asp:RadioButton ID="rdbCtrlLogicYes" runat="server" Text="Yes" GroupName="logic" CssClass="logic" />
                            <asp:RadioButton ID="rdbCtrlLogicNA" runat="server" Text="N/A" GroupName="logic" CssClass="logic" />
                        </td>
                    </tr>
    
                    <tr id="trAccessCtrl" class="trAccessCtrl" style="display: none;">
                        <td>
                            <asp:Label ID="lblAccessCtrl" runat="server" Text="Manage control?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbAccessCtrlNo" runat="server" Text="No" GroupName="accessCtrl" />
                            <asp:RadioButton ID="rdbAccessCtrlYes" runat="server" Text="Yes" GroupName="accessCtrl" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 19, 2016 10:22 AM
  • User61956409 posted

    Hi venkatzeus,

    You could attach click event to radio buttons via attributes selector and dynamically show/hide elements based on the selected item. the following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script>
            $(function () {
                $("[id*='rdbCtrlLogic']").click(function () {
                    if ($("[id='rdbCtrlLogicYes']").is(":checked")) {
                        $(".trAccessCtrl").show();
                    } else {
                        $(".trAccessCtrl").hide();
                    }
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table>
                    <tr>
                        <td>
                            <asp:Label ID="lblCtrlLogic" runat="server" Text="Are controls in place ?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbCtrlLogicNo" runat="server" Text="No" GroupName="gp1" />
                            <asp:RadioButton ID="rdbCtrlLogicYes" runat="server" Text="Yes" GroupName="gp1" />
                            <asp:RadioButton ID="rdbCtrlLogicNA" runat="server" Text="N/A" GroupName="gp1" />
                        </td>
                    </tr>
    
                    <tr id="trAccessCtrl" class="trAccessCtrl" style="display: none;">
                        <td>
                            <asp:Label ID="lblAccessCtrl" runat="server" Text="Manage control?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbAccessCtrlNo" runat="server" Text="No" />
                            <asp:RadioButton ID="rdbAccessCtrlYes" runat="server" Text="Yes" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 22, 2016 7:52 AM

All replies

  • User475983607 posted

    Make the radios mutually exclusive by applying the GroupName attribute to the radio button.  This will reduce the amount of code you have to write to handle the selection.  Add a CssClass to the "logic" group.  Assign a click Jquery handler to the new CssClass and place your logic in the handler.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioButtontoogle.aspx.cs" Inherits="TestingWeb.jquery.RadioButtontoogle" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
                $('.logic').click(function () {
                    //Get the button value
                    var selectedRadio = $('input', this).val();
    
                    //Apply toggle logic
                    switch(selectedRadio)
                    {
                        case 'rdbCtrlLogicYes':
                            $('#trAccessCtrl').show();
                            break;
                        case 'rdbCtrlLogicNo':
                        case 'rdbCtrlLogicNA':
                            $('#trAccessCtrl').hide();
                            break;
                    }
                    
                });
            });
      
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table>
                    <tr>
                        <td>
                            <asp:Label ID="lblCtrlLogic" runat="server" Text="Are controls in place ?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbCtrlLogicNo" runat="server" Text="No" GroupName="logic" CssClass="logic" />
                            <asp:RadioButton ID="rdbCtrlLogicYes" runat="server" Text="Yes" GroupName="logic" CssClass="logic" />
                            <asp:RadioButton ID="rdbCtrlLogicNA" runat="server" Text="N/A" GroupName="logic" CssClass="logic" />
                        </td>
                    </tr>
    
                    <tr id="trAccessCtrl" class="trAccessCtrl" style="display: none;">
                        <td>
                            <asp:Label ID="lblAccessCtrl" runat="server" Text="Manage control?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbAccessCtrlNo" runat="server" Text="No" GroupName="accessCtrl" />
                            <asp:RadioButton ID="rdbAccessCtrlYes" runat="server" Text="Yes" GroupName="accessCtrl" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 19, 2016 10:22 AM
  • User61956409 posted

    Hi venkatzeus,

    You could attach click event to radio buttons via attributes selector and dynamically show/hide elements based on the selected item. the following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script>
            $(function () {
                $("[id*='rdbCtrlLogic']").click(function () {
                    if ($("[id='rdbCtrlLogicYes']").is(":checked")) {
                        $(".trAccessCtrl").show();
                    } else {
                        $(".trAccessCtrl").hide();
                    }
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table>
                    <tr>
                        <td>
                            <asp:Label ID="lblCtrlLogic" runat="server" Text="Are controls in place ?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbCtrlLogicNo" runat="server" Text="No" GroupName="gp1" />
                            <asp:RadioButton ID="rdbCtrlLogicYes" runat="server" Text="Yes" GroupName="gp1" />
                            <asp:RadioButton ID="rdbCtrlLogicNA" runat="server" Text="N/A" GroupName="gp1" />
                        </td>
                    </tr>
    
                    <tr id="trAccessCtrl" class="trAccessCtrl" style="display: none;">
                        <td>
                            <asp:Label ID="lblAccessCtrl" runat="server" Text="Manage control?"></asp:Label>
                        </td>
                        <td colspan="4">
                            <asp:RadioButton ID="rdbAccessCtrlNo" runat="server" Text="No" />
                            <asp:RadioButton ID="rdbAccessCtrlYes" runat="server" Text="Yes" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 22, 2016 7:52 AM