JQuery click tr to implement checkbox and jquerytrcheckbox

JQuery click tr to implement checkbox and jquerytrcheckbox

The title description is a bit inappropriate, but I hope you can understand that for the sake of better image expression, 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:

$ (Function () {// Add a click event for all rows except the header (the first row. $ ("tr "). first (). nextAll (). click (function () {// the code in the bgRed switch style for this row: background-color: # FF0000; $ (this ). children (). toggleClass ("bgRed"); // determines 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 );}});});