点击表格选中checkbox复选框

2017-11-28 21:20

今天遇到一个问题，后台管理文章的时候，点击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标签加其样式，则只能移到复选框上面才能选中。