点击表格选中checkbox复选框
今天遇到一个问题,后台管理文章的时候,点击checkbox复选框不是很方便。
为什么不方便呢?
因为我把它放在一个td表格里面,而复选框就那么一点点大,不容易点得准。
于是就在想如何才能点击表格,就能选中复选框。
想了一下,终于找到了解决办法。
看下面代码。
html代码<table border="1" style="width:100%;">
<tr>
<td style="width:80%;">标题</td>
<td>选择</td>
</tr>
<tr>
<td>php教程文章</td>
<td><label style="display:block;"><input name="select[]" value="1" type="checkbox"></label></td>
</tr>
<tr>
<td>javascript教程文章</td>
<td><label style="display:block;"><input name="select[]" value="2" type="checkbox"></label></td>
</tr>
<tr>
<td>python教程文章</td>
<td><label style="display:block;"><input name="select[]" value="3" type="checkbox"></label></td>
</tr>
<tr>
<td>jquery教程文章</td>
<td><label style="display:block;"><input name="select[]" value="4" type="checkbox"></label></td>
</tr>
</table>
亲自测试一下 发现没有,很简单,我们只需使用label标签将checkbox包起来,然后给label标签添加样式display:block即可。
而最后一个没有为label标签加其样式,则只能移到复选框上面才能选中。