Radiobutton List with jquery with callback also explained.

In my earlier post  fetching value from radiobutton list ,I explained how to fetch value from radiobuttonlist using jquery.I this blog we will see how we can check a particular value of a radiobuttonlist using jquery.In addition we will also use callback in this example

Here we have two radiobuttonlists List1 and List2, on checking no option of first radio buttonlist the div containing the radiobuttonlist is hidden and the div containing the second radiobuttonlist is shown.When we check the no option of second radiobuttonlist second div is hidden and first div is made visible.

The purpose of using callback is to make sure that first the hide effect is completed and then the show effect starts.This is code  for callback
$('#div1').hide('slow', function() {
                    $('#div2').show('slow');
                   });
 This makes sure that show effect will start after the hide effect is copmleted.



I wanted to make sure that every time a radiobuttonlist shows its first option should be checked for that I have used this piece of code
$('#<%=List2.ClientID %>').find("input[value='1']").attr('checked', 'checked');
it checks the value specified.

 Below is the complete code.



----------------------------------------------------------------------------------------------------
asp.net code

<div id="div1">
    This div contains first radio button list<br />
    <asp:RadioButtonList ID="List1" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Text="yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="no" Value="2"></asp:ListItem>
    </asp:RadioButtonList>
    </div>
    <div id="div2">
    This div contains the second radio buttyon list.<br />
    <asp:RadioButtonList ID="List2" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Text="yes2" Value="1"></asp:ListItem>
    <asp:ListItem Text="no2" Value="2"></asp:ListItem>
    </asp:RadioButtonList>
    </div>
--------------------------------------------------------------------------------------------------------
Jquery code

$(document).ready(function() {
            $('#div2').hide();
            $(('#<%=List1.ClientID %>')).click(function() {
                var value1 = $('#<%=List1.ClientID %> input[type=radio]:checked').val();
                if (value1 == 2) {
                    $('#div1').hide('slow', function() {
                    $('#div2').show('slow');
                    $('#<%=List2.ClientID %>').find("input[value='1']").attr('checked', 'checked');
                    })
                }
            });
            $(('#<%=List2.ClientID %>')).click(function() {
                var value2 = $('#<%=List2.ClientID %> input[type=radio]:checked').val();
                if (value2 == 2) {
                    $('#div2').hide('slow', function() {
                        $('#div1').show('slow');
                        $('#<%=List1.ClientID %>').find("input[value='1']").attr('checked', 'checked');
                    });
                }
            });
        });
----------------------------------------------------------------------------------------------------