jquery Click Tr to implement checkbox

Title description is a bit inappropriate, but I hope you can understand, in order to more image of the expression, I specially recorded a GIF animated picture.

I do not know 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; do not have to point the check button to achieve;

Implementation of the process a bit tangled, tried a few times did not, and finally used a stupid method, is to click on the line, let his child element (TD) Background color 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)

Maybe you will ask me, then how do you judge the status of the checkbox is not checked (tick status) Ah?

In fact, I didn't even go to judge it .... I hope you don't spray me. I'm just judging. The background color of the sub-element (TD) of the selected row and the background color of the document.body are not the same, if the same, let checkbox.checked=true, not the same let checkbox.checked=false.

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

The method used in jquery:

First (): element one;

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

Children (): Find child elements;

Toggleclass (); Toggle Style

attr (): Adds the checked attribute to the checkbox;

The main implementation of the code:

$(function () {            //adds a Click event to all rows except the table header (the first row).$ ("tr"). First (). Nextall (). Click (function () {                //Toggle style For this line of clicks bgred Code: Background-color: #FF0000;$( This). Children (). Toggleclass ("bgred"); //determines whether the background color of the TD tag is the same as the background color of the body;                if($( This). Children (). CSS ("Background-color")! = $ (document.body). CSS ("Background-color")) {                    //if the same, checkbox.checked=true;$( This). Children (). First (). Children (). attr ("Checked",true); } Else {                    //if different, checkbox.checked=false;$( This). Children (). First (). Children (). attr ("Checked",false);       }            }); });

jquery Click Tr to implement checkbox