オプション（CSS）を選択してラジオボタンをチェックしたようにするには

Question

オプションのテキストにカーソルを合わせて選択すると、ラジオボタンがオンになります。ラベルを選択すると、チェックボックスが選択された状態になります。

ラベルを追加するか、tdをボタンとして使用する必要がありますか？

.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; 
 
\t 
 
} 
 
.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

ラベルを使用してください - 私はあなたが実際にテキストのホバーに選択したくなかったと仮定？この

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

またはこの

<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; 
 
\t 
 
} 
 
.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>

などのような