Tuesday, March 26, 2013

Display CheckBox Checked Items using Jquery




HTML:

<form id="form1" runat="server">
<div class="smallDiv">
<h2>Dynamically display the checked options</h2>
<br />
<asp:CheckBox ID="cb1" runat="server" Text="Option One" /><br />
<asp:CheckBox ID="cb2" runat="server" Text="Option Two" /><br />
<asp:CheckBox ID="cb3" runat="server" Text="Option Three" /><br />
<br />
Tip: Choosing the CheckBoxes displays the CheckBox text below
<br /><br />
<p id="para"></p>
</div>
</form>

Jquery Script:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function () {
var arr;
$('input:checkbox').click(function (e) {
trackChecked();
});

function trackChecked() {
var checked = $(':checkbox:checked');
arr = [];
checked.each(function () {
arr.push($(this).next().text());
});
$("#para").html(arr.join('</br>'));
}
});
</script>

No comments:
Write comments
Recommended Posts × +