In this post Asp.Net jQuery checkbox Tutorial,
we shall see about the events, attributes and properties of checkboxes with
respect to jQuery.
We will learn the various properties, events and
attributes using an example. In this example we will have an Individual CheckBox and a CheckBoxList
There are a number of buttons clicking on which will trigger
the events, attributes and properties of the checkboxes. 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 checkboxes.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
CheckBox</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
CheckBox Status : Checked
$('#cmdCheck').click(function(event) {
event.preventDefault();
$('#chkStatus').attr('checked', true);
});
//
// Set
CheckBox Status : UnChecked
$('#cmdUnCheck').click(function(event) {
event.preventDefault();
$('#chkStatus').attr('checked', false);
});
//
// Get
Status of CheckBox
$('#cmdGetCheckedStatus').click(function(event) {
event.preventDefault();
alert($('#chkStatus:checked').is(':checked'));
});
//
// Get
CheckBox Value
$('#cmdGetCheckboxValue').click(function(event) {
event.preventDefault();
alert($('label[for=' + $('#chkStatus').attr('id') + ']').html());
});
//
//
Checkboxes Checked Event
$('#chkStatus').click(function() {
alert($('#chkStatus').attr('checked')
? true : false);
alert($('#chkStatus:checked').val() ? true
: false);
alert($('#chkStatus:checked').is(':checked'));
});
//
// Loop
through all Checkboxes in a CheckBoxList
$('#cmdLoopList').click(function(event) {
event.preventDefault();
$('#chkListCity
input:checkbox').each(function() {
alert($(this).attr('id') +
' => ' + $(this).is(':checked'));
});
});
//
// Loop
through all Checkboxes in the page
$('#cmdLoop').click(function(event) {
event.preventDefault();
$("input[type=checkbox]").each(function() {
alert($(this).attr('id') +
' => ' + $(this).is(':checked'));
});
});
//
// Loop
through all Checked Checkboxes in the page
$('#cmdLoopChecked').click(function(event) {
event.preventDefault();
$("input[type=checkbox][checked]").each(function() {
alert($(this).attr('id') +
' => ' + $(this).is(':checked'));
});
});
//
// Loop
through - Get CheckBox Label/Values
$('#cmdGetValues').click(function(event) {
event.preventDefault();
$("input[type=checkbox]").each(function() {
alert($('label[for='
+ this.id + ']').html()
+ ' => ' + $(this).is(':checked'));
});
});
//
// Loop
through - Get List of Selected Checkboxes in the Page
$('#cmdGetSelectedList').click(function(event) {
event.preventDefault();
var
selectedIDs = '';
var
selectedValues = '';
$("input[type=checkbox][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 Checkboxes in the CheckBoxList
$('#cmdGetSelectedCheckboxList').click(function(event) {
event.preventDefault();
var
selectedIDs = '';
var
selectedValues = '';
$('#chkListCity
input:checkbox').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="frmCheckBox" runat="server">
<table>
<tr>
<td colspan="2">
<b>Individual
Checkbox</b>
</td>
</tr>
<tr>
<td>Is
Active?</td>
<td>
<asp:CheckBox
ID="chkStatus"
runat="server"
Text="Active" />
</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="cmdGetCheckboxValue"
runat="server"
Text="GetCheckboxValue" /><br />
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2">
<b>CheckboxList</b>
</td>
</tr>
<tr>
<td>Select
City</td>
<td>
<asp:CheckBoxList
ID="chkListCity"
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:CheckBoxList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button
ID="cmdLoopList"
runat="server"
Text="Loop CheckBoxList" /><br
/>
<asp:Button
ID="cmdLoop"
runat="server"
Text="Loop all Checkboxes" /><br
/>
<asp:Button
ID="cmdLoopChecked"
runat="server"
Text="Loop Checked Checkboxes" /><br
/>
<asp:Button
ID="cmdGetValues"
runat="server"
Text="Get CheckBox Values" /><br
/>
<asp:Button
ID="cmdGetSelectedList"
runat="server"
Text="Get Selected CheckBoxs in Page" /><br
/>
<asp:Button
ID="cmdGetSelectedCheckboxList"
runat="server"
Text="Get Selected CheckBoxs in CheckBoxList" /><br
/>
</td>
</tr>
</table>
</form>
</body>
</html>
That's it we have studied all the properties, events and attributes of checkboxes in jQuery
Related Posts
No comments:
Post a Comment