How can we highlight checkbox on click Event?

This post  shows how can we highlight checkbox on click Event.
In this Scenario I am taking a Asp.net CheckboxList. Simply I Want that if I make checked a checkbox it should be highlighted and if I make unchecked it should be as default.

Simple Design Code below

[html]

<form id="form1" runat="server">

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Text="One"></asp:ListItem>
<asp:ListItem Text="two"></asp:ListItem>
<asp:ListItem Text="three"></asp:ListItem>
<asp:ListItem Text="Four"></asp:ListItem>
</asp:CheckBoxList>

</form>

[/html]

CSS

[css]

.selected
{
background-color:Yellow;
}
.default
{
background-color:inherit;
}

[/css]

On page Load



Now we will Use some jquery code to make it as we want.

Step -1
Add reference of Jquery API.

Step -2

Now we will write some custom code.

1- First of all we use Selector to find appropriate checkbox.

var checkedBox = $("table[id$=CheckBoxList1] input");

Note – Here, I use table because checkboxList is treated as table on viewing page source and its item treated as Label. Take a look below.

On View Page Source of Page CheckBoxList is Shown below.
[html]
<table id="CheckBoxList1">
<tbody>
<tr>
<td><label for="CheckBoxList1_0">One</label></td>
</tr>
<tr>
<td><label for="CheckBoxList1_1">two</label></td>
</tr>
<tr>
<td><label for="CheckBoxList1_2">three</label></td>
</tr>
<tr>
<td><label for="CheckBoxList1_3">Four</label></td>
</tr>
</tbody>
</table>
[/html]
Step 3-
Now we will check that particular selected checkbox has css .selected or not if it has then remove class .selected and add class .default .If not then add class .select and remove class .default

[javascript]
checkedBox.click(function () {
if($(this).next().is(".selected")) {
$(this).next().removeClass("selected").addClass("default");
}
else {
$(this).next().removeClass("default").addClass("selected");
}
});
[/javascript]

Here is Output:-

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.