Friday, July 6, 2012

Asp.Net jQuery Radio Button Tutorial


In this post Asp.Net jQuery Radio Button Tutorial, we shall see about the events, attributes and properties of Radio Button with respect to jQuery.

We will learn the various properties, events and attributes using an example. In this example we will have an Individual Radio Button and a Radio Button List


There are a number of buttons clicking on which will trigger the events, attributes and properties of the Radio Button s. Here is the screen shot.



Create a new Asp.net page, copy the entire code below, change reference of the jQuery file src="JavaScript/jquery-1.7.2.js" to point to your local directory. Build and run the application, click on each of the buttons to study the behavior of the Radio Button s.

Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery RadioButton</title>
    <link type="text/css" href="Stylesheet.css" rel="Stylesheet" />
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            //
            // Set RadioButton Status : Checked
            $('#cmdCheck').click(function(event) {
                event.preventDefault();
                $('#radActive').attr('checked', true);
            });
            //
            // Set RadioButton Status : UnChecked
            $('#cmdUnCheck').click(function(event) {
                event.preventDefault();
                $('#radActive').attr('checked', false);
            });
            //
            // Get Status of RadioButton
            $('#cmdGetCheckedStatus').click(function(event) {
                event.preventDefault();
                alert($('#radActive:checked').is(':checked'));
                alert($('#radInActive:checked').is(':checked'));
            });
            //
            // Get RadioButton Value
            $('#cmdGetRadioButtonValue').click(function(event) {
                event.preventDefault();
                alert($('label[for=' + $('#radActive').attr('id') + ']').html());
                alert($('label[for=' + $('#radInActive').attr('id') + ']').html());
            });
            //
            // RadioButtons Checked Event
            $('#radActive').click(function() {
                alert($('#radActive').attr('checked') ? true : false);
                alert($('#radActive:checked').val() ? true : false);
                alert($('#radActive:checked').is(':checked'));
            });
            //
            // Loop through all RadioButtons in a RadioButtonList
            $('#cmdLoopList').click(function(event) {
                event.preventDefault();
                $('#radListCity input:radio').each(function() {
                    alert($(this).attr('id') + ' => ' + $(this).is(':checked'));
                });
            });
            //
            // Loop through all RadioButtons in the page
            $('#cmdLoop').click(function(event) {
                event.preventDefault();
                $("input[type=radio]").each(function() {
                    alert($(this).attr('id') + ' => ' + $(this).is(':checked'));
                });
            });
            //
            // Loop through all Checked RadioButtons in the page
            $('#cmdLoopChecked').click(function(event) {
                event.preventDefault();
                $("input[type=radio][checked]").each(function() {
                    alert($(this).attr('id') + ' => ' + $(this).is(':checked'));
                });
            });
            //
            // Loop through - Get RadioButton Label/Values
            $('#cmdGetValues').click(function(event) {
                event.preventDefault();
                $("input[type=radio]").each(function() {
                    alert($('label[for=' + this.id + ']').html() + ' => ' + $(this).is(':checked'));
                });
            });
            //
            // Loop through - Get List of Selected RadioButtons in the Page
            $('#cmdGetSelectedList').click(function(event) {
                event.preventDefault();
                var selectedIDs = '';
                var selectedValues = '';
                $("input[type=radio][checked]").each(function() {
                    if (selectedIDs.length == 0) {
                        selectedIDs = $(this).attr('id');
                        selectedValues = $('label[for=' + this.id + ']').html();
                    }
                    else {
                        selectedIDs += ", " + $(this).attr('id');
                        selectedValues += ", " + $('label[for=' + this.id + ']').html();
                    }
                });
                alert('Selected IDs: ' + selectedIDs);
                alert('Selected Values: ' + selectedValues);
            });
            //
            // Loop through - Get List of Selected RadioButtons in the RadioButtonList
            $('#cmdGetSelectedRadioButtonList').click(function(event) {
                event.preventDefault();
                var selectedIDs = '';
                var selectedValues = '';
                $('#radListCity input:radio').each(function() {
                    if ($(this).attr('checked')) {
                        if (selectedIDs.length == 0) {
                            selectedIDs = $(this).attr('id');
                            selectedValues = $('label[for=' + this.id + ']').html();
                        }
                        else {
                            selectedIDs += ", " + $(this).attr('id');
                            selectedValues += ", " + $('label[for=' + this.id + ']').html();
                        }
                    }
                });
                alert('Selected IDs: ' + selectedIDs);
                alert('Selected Values: ' + selectedValues);
            });
        });
     </script>   
</head>
<body>
    <form id="frmRadioButton" runat="server">
    <table>
    <tr>
        <td colspan="2">
            <b>Individual RadioButtons</b>
        </td>
    </tr>   
    <tr>
        <td>Status</td>
        <td>
            <asp:RadioButton 
            ID="radActive"
            runat="server"
            GroupName="Status"
            Text="Active" />
           
            <asp:RadioButton 
            ID="radInActive"
            runat="server"
            GroupName="Status"
            Text="InActive" />
        </td>           
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button
                ID="cmdCheck"
                runat="server"
                Text="Check" /><br />
            <asp:Button
                ID="cmdUnCheck"
                runat="server"
                Text="UnCheck" /><br />    
            <asp:Button
                ID="cmdGetCheckedStatus"
                runat="server"
                Text="GetCheckedStatus" /><br />
            <asp:Button
                ID="cmdGetRadioButtonValue"
                runat="server"
                Text="GetRadioButtonValue" /><br />               
        </td>
    </tr>
    <tr><td> </td></tr>
    <tr>
        <td colspan="2">
            <b>RadioButtonList</b>
        </td>
    </tr>   
    <tr>
        <td>Select City</td>
        <td>
            <asp:RadioButtonList
                ID="radListCity"
                runat="server"
                RepeatDirection="Horizontal">
            <asp:ListItem Value="LN">London</asp:ListItem>
                <asp:ListItem Value="NY">New York</asp:ListItem>
                <asp:ListItem Value="CA">California</asp:ListItem>
                <asp:ListItem Value="PA">Paris</asp:ListItem>
                <asp:ListItem Value="TK">Tokyo</asp:ListItem>
            </asp:RadioButtonList>         
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button
                ID="cmdLoopList"
                runat="server"
                Text="Loop RadioButtonList" /><br />
            <asp:Button
                ID="cmdLoop"
                runat="server"
                Text="Loop all RadioButtons" /><br />
            <asp:Button
                ID="cmdLoopChecked"
                runat="server"
                Text="Loop Checked RadioButtons" /><br />
            <asp:Button
                ID="cmdGetValues"
                runat="server"
                Text="Get RadioButton Values" /><br />
            <asp:Button
                ID="cmdGetSelectedList"
                runat="server"
                Text="Get Selected RadioButtons in Page" /><br />   
            <asp:Button
                ID="cmdGetSelectedRadioButtonList"
                runat="server"
                Text="Get Selected RadioButtons in RadioButtonList" /><br />                            
        </td>
    </tr>
    </table>
    </form>
</body>
</html>

That's it we have studied all the properties, events and attributes of Radio Buttons in jQuery

Search Flipkart Products:
Flipkart.com

No comments: