[英]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.