jquery Click TR implements the checkbox selection method _jquery

The title describes a bit inappropriate, but I hope you can understand that in order to more image expression, I deliberately recorded a GIF animated picture.

I do not know whether the actual development of the use of this effect, but I personally think that this way more humane, because as long as the point to a line, you can make checkbox.checked=true;

The process of implementation is a bit tangled, tried a few times did not become, and finally used a stupid method, is to click on the line, so that his child elements (TD) Background color is red. (because I used the light bar effect, if I click on the line (TD), the color is changed, but the mouse left the time to change back to the original color again)

Maybe you will ask me, then how do you Judge checkbox state is not checked (tick state) Ah?

In fact, I did not go to judge it .... I hope you don't spray me. I just judged. The background color of the selected row's child elements (TD) is not the same as the background color of the document.body, if the same, let the checkbox.checked=true, not the same let checkbox.checked=false.

Thought is such a train of thought, if who has a better way to paste up, we learn to study together.

The methods used in jquery:

First (): element one;

Nextall (): All elements after XX: mainly to remove the header of the first row

Children (): Find child elements;

Toggleclass (); Toggle Style

attr (): Add checked attribute to checkbox;

The main implementation code:

Copy Code code as follows:

$ (function () {
Add the Click event to all rows except the header (the first line).
$ ("tr"). Nextall (). Click (function () {
Toggles the code in the style bgred for the clicked Line: Background-color: #FF0000;
$ (this). Children (). Toggleclass ("bgred");
To determine whether the background color of TD mark and Body background color is the same;
if ($ (this). Children (). CSS ("Background-color")!= $ (document.body). CSS ("Background-color")) {
If the same, checkbox.checked=true;
$ (this). Children (). (). A (). Children (). attr ("Checked", true);

} else {
if different, checkbox.checked=false;
$ (this). Children (). (). A (). Children (). attr ("checked", false);
}
});
});