<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) {
$("input:checkbox[name=Options]").prop("checked", true);
$("label[for=chkselect]").text("De-SelectAll");
}
else {
$("input:checkbox[name=Options]").prop("checked", false);
$("label[for=chkselect]").text("SelectAll");
}
});
$("input:checkbox[name=Options]").change(function () {
var totalchkitems = $("input:checkbox[name=Options]").length;
var totalchkditems = $("input:checkbox[name=Options]: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 = "";
var values = "";
if ($("input:checkbox[name=Options]").is(":checked")) {
$("input:checkbox[name=Options]:checked").each(function () {
values += $(this).val() + ",";
txts += $("label[for=" + $(this).prop("id") + "]").text() + ",";
});
txts = txts.substring(0,
txts.length - 1);
values =
values.substring(0, values.length - 1);
$("#Span1").html("selected
Options:" + "<br/>" + "Text:" + txts + "<br/>" + "values" + values);
}
else {
$("#Span1").html("<b> No
Option is selected!!!!</b>");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="checkbox" id="chkselect" />
<label for="chkselect">Select All</label>
<br />
<br />
<input type="checkbox" id="chk1" value="Opt1" name="Options" /><label for="chk1">Option1</label>
<input type="checkbox" id="chk2" value="Opt2" name="Options" /><label for="chk2">Option2</label>
<input type="checkbox" id="chk3" value="Opt3" name="Options" /><label for="chk3">Option3</label>
<br />
<br />
<input type="button" id="btnSubmit" value="submit" />
<br />
<span id="Span1"></span>
</div>
</form>
</body>
</html>
Before check
After Check
No comments:
Post a Comment