How to Show / Hide Div Tag Based on RadioButtonList Using JQuery


 Show/Hide Div Tag Based on RadioButtonList Using JQuery

In these article we see How to Show and Hide Div Tag based on RadiobuttonList Click Using JQuery. Before go through this tutorial i'm strongly recommended you to read my previous tutorials : How to Validate two Textbox values (Password and Confirm Password Comparion) by Using JQuery and another article is How to Validate Textbox Data doesn't allow empty value by using JQuery.

HTML Markup : Create Page and RadiobuttonList

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    -----   Add JQuery Code Here  -----

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:RadioButtonList ID="rbl_yes_no" runat="server" RepeatDirection="Horizontal" Width="250px">
     <asp:ListItem Text="Show" Value="1" Selected="True"></asp:ListItem>
     <asp:ListItem Text="Hide" Value="2" ></asp:ListItem>
    </asp:RadioButtonList>
      <div id="divshow" style="width:400px; height:400px; background-color:#0066cc; font-size:5em; text-align:center; vertical-align:middle;"> Show Time </div>
    </div>
    </form>
</body>
</html>

JQuery Code :

<script type="text/javascript">
         $(document).ready(function () {
             // $('input[name="rbl_soft_training_instit"]').change(function () {
             $("table[id*=rbl_yes_no] input").click(function () {
                 if ($(this).val() == "1") {
                     $("#divshow").show();
                 }
                 else if($(this).val()=="2"){
                     $("#divshow").hide();
                 }
             });
         });
    </script>
0 Komentar untuk "How to Show / Hide Div Tag Based on RadioButtonList Using JQuery"

Back To Top