HTML修改单选框多选框按钮样式

<!--html-->
<div id="project" class="col-sm-13">
            <input type="radio" id="chenei" name="project">
            <label class="select"  for="chenei">车内净化</label>
            <input type="radio" id="jujia" name="project">
            <label class="unselect"  for="jujia" >居家空气治理</label>
            <input type="radio" id="gonggong" name="project">
            <label class="unselect"  for="gonggong">公共场所治理</label>
        </div>

/*CSS代码*/
input{
        margin-right:60px;
        visibility:hidden; 
        /*使用visibility方便调整间距。你也可以使用display:none;但是就无法调整间距了*/
      }

    .select {
      padding-left: 30px;
      cursor: pointer;
      background: url(../icon/select.png) no-repeat left;
    }
    .unselect{
      padding-left: 30px;
      cursor: pointer;
      background: url(../icon/unselect.png) no-repeat left;
    }

/*JS*/
 $("#project label").click(function(){
        var a = $(this).siblings().attr("class","unselect");
        $(this).attr("class","select");
    })

基本思路：
1）把原来的默认按钮设为不可见。
2）设置两个类，使用padding-left扩充span的内边距，设置背景，背景即为新样式。
3）使用JQ的attr()方法，当点击事件触发时，先对兄弟元素进行class的切换，从select 变为 unselect ，再让自己从unselect 变为 select ，这里使用了siblings() 的兄弟遍历方法。
4）不用担心表单是否被正确提交。原本的默认样式其实还存在于DOM树中的，只是隐藏起来而已，不放心的话可以变为可见，检查检查。