How to Get Multiple Checked Checkbox
Values in Asp.Net with Jquery
Description: In this article I will
explain How to Check/Uncheck or we can say Select/Deselect all the items (Checkboxes)
in Checkbox List at once on click of single Check All/Select All checkBox in
Asp.net using JQuery and explain
how to get multiple checked checkbox value in Jquery from checkbox.
Source Code with Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
width: 216px;
}
</style>
<script src="Script/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
//jQuery
to Check Uncheck Select Deselect all items in Asp.net CheckBoxList on click of
Select All CheckBox
$("#<%=chkall.ClientID %>").click(function ()
{
$("[id*=chkquli]
input:checkbox").prop('checked', this.checked);
});
$("[id*=chkquli]
input:checkbox").click(function ()
{
if ($("#<%= chkall.ClientID %>").prop('checked') == true && this.checked == false)
{
$("#<%= chkall.ClientID %>").prop('checked', false);
}
else
{
var flag = true;
$("[id*=chkquli]
input:checkbox").each(function ()
{
if (this.checked == false)
flag = false;
}
);
$("#<%= chkall.ClientID %>").prop('checked', flag);
}
});
//
code for how to get checked value with
CheckBoxList
$('#btnget').click(function (e)
{
var slvals = []
//
$('input:checkbox[name=chkquli]:checked').each(function() {
$('[id*=chkquli]
input:checkbox').each(function ()
{
if(this.checked)
slvals.push($(this).val()+',')
})
//alert('Selected Checkbox
values are: ' + slvals)
$('#lblresult').html(slvals);
e.preventDefault();
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td colspan="2">
<h3>How to Get Multiple
Checked Checkbox Values</h3>
</td>
</tr>
<tr>
<td class="auto-style2">
</td>
<td>
<asp:CheckBox ID="chkall" runat="server" Text="Select
All"
/>
</td>
</tr>
<tr>
<td class="auto-style2">Select your
qualification</td>
<td>
<asp:CheckBoxList ID="chkquli" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>High School</asp:ListItem>
<asp:ListItem>Intermidiate</asp:ListItem>
<asp:ListItem>Graduation</asp:ListItem>
<asp:ListItem>Post Graduation</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="btnget" runat="server" Text="Get Checked
Value"
/>
<asp:Label ID="lblresult" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Result:
0 comments:
Post a Comment