The last blog post was about check boxes, this time it is about radio buttons. Sometimes when querying, only one record can be selected. If the row of the selected record is highlighted, the single button of the row will also be displayed. The select button is also selected, which will improve the user experience. Today’s era is the era of user experience.
The effect is as follows:
The CSS file is as follows:
.selected{
background:#FF6500;
color:#fff;
}:
This time the code of the js file becomes Even simpler, as shown below:
/**
* Set the background color of the table containing radio buttons
*/
$(document).ready(function()
{
/**
* Change the background color when the table is clicked
*/
$("#tablight tr:gt(0)").click (function() //Get
{
$(this).addClass("selected").siblings().removeClass("selected").end().find(" :radio").attr("checked",true);
});
});
If you want the code to take effect, you need to add the id attribute to the table. The attribute value is "tablight". Once this is done, just reference these two files when using it.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
