[英]How can i make a radio button appear checked after selecting an option (CSS)
當我將鼠標懸停在一個選項的文本上並將其選中時,單選按鈕應被選中。 這樣,當我選擇標簽時,該復選框將顯示為選中狀態。
我應該添加標簽還是將該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; } .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>
使用標簽-我假設您實際上並不想在文本懸停時進行選擇?
像這樣
<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>`
$('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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.