JQuery click tr to implement the checkbox Selection Method _ jquery

JQuery clicks tr to achieve the checkbox selection method. If you need a friend, you can refer to the title description, but I hope you can understand that, in order to better express the image, I specially recorded a GIF animated image.

I don't know whether this effect is used in actual development, but I personally think that this method is more user-friendly, because as long as one line is clicked, it can make the CheckBox. checked = true; you do not have to click the check button;

The implementation process is a bit tangled. I tried it several times and finally used a stupid method, that is, when I clicked the line, let his sub-element (td) the background color is red. (because I used the beam effect. If I clicked the line (td), the color changed, but the color changed as soon as the mouse left)

Maybe you will ask me, how do you determine whether the CheckBox status is checked (check the status?

In fact, I did not judge it at all... I hope you will not spray me. I just determined the background color and document of the child element (td) of the selected row. whether the background color of the body is the same. If the background color is the same, let the CheckBox. checked = true. checked = false.

This is the way of thinking. If anyone has a better way to stick it up, everyone can learn it together ..

Methods Used in Jquery:

First (): the first element;

NextAll (): all elements after xx: mainly to remove the header of the first line

Children (): searches for child elements;

ToggleClass (); Switch the style

Attr (): adds the checked attribute to the CheckBox;

Main Implementation Code:

The Code is as follows:

$ (Function (){
// Add a click event for all rows except the header (the first line.
$ ("Tr"). first (). nextAll (). click (function (){
// The code in the bgRed switch style: background-color: # FF0000;
$ (This). children (). toggleClass ("bgRed ");
// Determine whether the background color marked by td is the same as the background color of the body;
If (((this).children().css ("background-color ")! = Background (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 );
}
});
});