特殊样式的多选与单选样式的实现

不知大家是否在工作有有遇到特殊样式的单选与多选。既要实现设计的图形又要方便后台获取数据。这个时候千万不要自定义样式，这样会加大后台人员的工作量（嘿嘿，不利于同事间的和谐），也不能写漏爆的原生样式，接下来我们一起巩固巩固怎么实现特殊样式的单选与多选吧！

    先上HTML部分：

    <div class="choice">
<!--只要input在label内点击label的任何地方都能选中input-->
<label class="radio"><input type="radio" class="single"  name="zeng" checked="checked"/><i></i>过得好</label>
<label class="radio"><input type="radio" class="single"  name="zeng"/><i></i>不好</label>
</div>
<div class="more-choice">
<label class="all"><input type="checkbox" name="more" /><i></i>全选</label>
<label><input type="checkbox" name="more" /><i></i>111</label>
<label><input type="checkbox" name="more" /><i></i>222</label>
<label><input type="checkbox" name="more" /><i></i>333</label>
<label><input type="checkbox" name="more" /><i></i>444</label>
<label><input type="checkbox" name="more" /><i></i>555</label>
</div>//需要注意的是点击label区域那么label所在得input是会被选中的哦！

    接下来一起探讨css部分吧！

      /* 单选部分*/

           .choice .radio{
   position: relative;     
   padding-left: 25px;/*腾出空间供单选按钮选用*/
   cursor: pointer;
   }
.choice input{position: absolute;left: -9999px;}
.choice i{
display: block;
position: absolute;
left: 0;
top: 0px;
width: 15px;
height: 15px;
outline: none;
border: 1px solid pink;
background: yellow;
border-radius: 50%;
transition: border-color .3s;
-webkit-transition: border-color .3s;
}
.choice input+i:after{
position: absolute;
left: 3px;
top: 3px;
content:" " ;
width: 9px;
height: 9px;
border-radius:50%;
background: lightblue;
opacity: 0;
transition:opacity .1s;
-webkit-transition:opacity .1s;
}
.choice input:checked+i{
border-color: darkcyan;
}

.choice input:checked+i:after{
opacity: 1;
}

            /* 多选部分*/

                     .more-choice label{position: relative;padding-left: 30px;}
.more-choice input{position: absolute;left: -9999px;}
.more-choice i{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: lightblue;position: absolute;left: 0;top: 0;}
.more-choice i:after{width: 8px;height: 8px;content: "";position: absolute;left: 6px; top: 6px;background: yellow;border-radius: 50%;opacity: 0;}
.more-choice input:checked+i:after{opacity: 1;}

        //合理的运用css可以减少我们不必要的JS代码，例如CSS的伪类元素和是否选中后的样式设计可以大量的减少我们的JS代码的

      最后再谈谈我们的JS控制全选及验证我们的input框是否被选中吧！

      <script type="text/javascript">
$(".yuan input").on("click",function(){
               console.log($(this).siblings().is(":checked"));
})
$(".more-choice .all input").on("click",function(){
if($(this).is(":checked")){
$(this).parents(".more-choice").find("input").prop("checked",true);
}else{
$(this).parents(".more-choice").find("input").prop("checked",false);
}
})
   
</script>

   

     总结:虽然简单，但在简单中积累就会成为一个不简单的程序猿哦！