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" >
<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
Related Posts
No comments:
Post a Comment