简单的复选框按钮实现

废话不多说，我们要实现的效果是这个样子的，注意（我的是默认选中；请看下面的详细代码，有具体的讲解），如下图： 

代码贴上：

<div class="radio-inline">
       <input type="checkbox" name="ceshi1" id="ceshi1" value="1" checked="checked" 
             style="vertical-align:middle;margin-bottom: 6px;"/>
        <label for="ceshi1">测试1</label>
</div>
<div class="radio-inline">
         <input type="checkbox" name="ceshi2" id="ceshi2" value="2" checked="checked" 
                  style="vertical-align:middle;margin-bottom: 6px;"/>
        <label for="ceshi2">测试2</label>
</div>
<div class="radio-inline">
          <input type="checkbox" name="ceshi3" id="ceshi3" value="3" checked="checked" 
               style="vertical-align:middle;margin-bottom: 6px;"/>
           <label for="ceshi3">测试3</label>
</div>

主要代码讲解：

1、type="checkbox"  这个就是复选框属性；如果改成 type="radio"  ，那就是单选框，如下图：

 测试1就是单选框样式，其它两个是复选框；

2、checked="checked"    默认选中属性

3、style="vertical-align:middle;margin-bottom: 6px;"   主要是与汉字对其，如果没有样式，就如下图所示：

细看发现“测试1”与复选框没有对齐；加上上边的样式就可以了；margin-bottom 的值根据你实际情况进行调整；