<html >
<head >
<title></title>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#chkselect").change(function () {
if ($(this).is(":checked") == true) {
$("#chkList
input:checkbox").prop("checked", true);
$("label[for=chkselect]").text("De-SelectAll");
}
else {
$("#chkList
input:checkbox").prop("checked", false);
$("label[for=chkselect]").text("SelectAll");
}
});
$("#chkList input:checkbox").change(function () {
var totalchkitems = $("#chkList
input:checkbox").length;
var totalchkditems = $("#chkList
input:checkbox:checked").length;
if (totalchkitems == totalchkditems) {
$("#chkselect").prop("checked", true);
$("label[for=chkselect]").text("De-SelectAll");
}
else {
$("#chkselect").prop("checked", false);
$("label[for=chkselect]").text("SelectAll");
}
});
$("#btnSubmit").click(function () {
var txts = "";
if ($("#chkList input:checkbox").is(":checked")) {
$("#chkList
input:checkbox:checked").each(function () {
txts += $("label[for=" + $(this).prop("id") + "]").text() + ",";
});
txts = txts.substring(0,
txts.length - 1);
$("#lblResult").html("selected
Options:" + "<br/>" + "Text:" + txts);
}
else {
$("#lblResult").html("<b> No
Option is selected!!!!</b>");
}
});
});
</script>
</head>
<body>
<form id="form2" runat="server">
<div>
<asp:CheckBox ID="chkselect" runat="server" Text="SelectAll" />
<br />
<asp:CheckBoxList ID="chkList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Option1" Value="Opt1"/>
<asp:ListItem Text="Option2" Value="Opt2" />
<asp:ListItem Text="option3" Value="opt3" />
</asp:CheckBoxList>
<input type="button" id="btnSubmit" value="submit" />
<br />
<asp:Label ID="lblResult" runat="server" />
</div>
</form>
</body>
</html>
Output:
No comments:
Post a Comment