选择选项（CSS）后如何使单选按钮显示为选中状态

Question

When I hover over the text of an option and select it, the radio button should get checked. So that when I select the label, the checkbox will appear selected.

Should I add a label or make that td as a button?

 .zui-table { border: solid 1px #DDEEEE; border-collapse: collapse; border-spacing: 0; font: normal 13px Arial, sans-serif; } .zui-table thead th { background-color: #DDEFEF; border: solid 1px #DDEEEE; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; } .zui-table tbody td { border: solid 1px #DDEEEE; color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; } .zui-table-rounded { border: none; } .zui-table-rounded thead th { background-color: #CFAD70; border: none; text-shadow: 1px 1px 1px #ccc; color: #333; float: center; } .zui-table-rounded thead th:first-child { border-radius: 10px 0 0 0; } .zui-table-rounded thead th:last-child { border-radius: 0 10px 0 0; } .zui-table-rounded tbody td { border: none; border-top: solid 1px #957030; background-color: #EED592; } .zui-table-rounded tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } .zui-table-rounded tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } 

 <table class="zui-table zui-table-rounded" align="center"> <thead> <tr> <th colspan="4">1.Look at this series: 7, 10, 8, 11, 9, 12, ... What number should come next?</th> </tr> </thead> <tbody> <tr> <td><input type="radio" name="question1" value="lr0101">7</td> <td><input type="radio" name="question1" value="lr0102">10</td> <td><input type="radio" name="question1" value="lr0103">12</td> <td><input type="radio" name="question1" value="lr0104">13</td> <!--Option b--> </tr> </tbody> </table> 

Answer 1

Use a label - I assume you did not actually want to select on hover of the text ?

Like this

<td><label><input type="radio" 
name="question1" value="lr0101">7</label>/td>

Or like this

<td><input type="radio" id="answer1" 
name="question1" value="lr0101"><label 
for="answer1">7</label>/td>`

Answer 2

 $('label').each(function(){ $(this).mouseenter(function(){ $(this).siblings('input').prop("checked", true) }); $(this).siblings('input').mouseenter(function(){ $(this).prop("checked", true) }); }); 

 .zui-table { border: solid 1px #DDEEEE; border-collapse: collapse; border-spacing: 0; font: normal 13px Arial, sans-serif; } .zui-table thead th { background-color: #DDEFEF; border: solid 1px #DDEEEE; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; } .zui-table tbody td { border: solid 1px #DDEEEE; color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; } .zui-table-rounded { border: none; } .zui-table-rounded thead th { background-color: #CFAD70; border: none; text-shadow: 1px 1px 1px #ccc; color: #333; float: center; } .zui-table-rounded thead th:first-child { border-radius: 10px 0 0 0; } .zui-table-rounded thead th:last-child { border-radius: 0 10px 0 0; } .zui-table-rounded tbody td { border: none; border-top: solid 1px #957030; background-color: #EED592; } .zui-table-rounded tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; } .zui-table-rounded tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="zui-table zui-table-rounded" align="center"> <thead> <tr> <th colspan="4">1.Look at this series: 7, 10, 8, 11, 9, 12, ... What number should come next?</th> </tr> </thead> <tbody> <tr> <td><input type="radio" name="question1" value="lr0101" id="7"><label for="7">7</label></td> <td><input type="radio" name="question1" value="lr0102" id="10"><label for="10">10</label></td> <td><input type="radio" name="question1" value="lr0103" id="12"><label for="12">12</label></td> <td><input type="radio" name="question1" value="lr0104" id="13"><label for="13">13</label></td> <!--Option b--> </tr> </tbody> </table>