实例小技巧-单选复选框（用css代替js）

转载地址：https://mp.weixin.qq.com/s/fD1T2Ril3FflYPptzC7HvQ

css(3)中选择器众多，具体可参考CSS 选择器参考手册。不知什么原因，在很多项目中，实现诸如单选，复选等（类似）功能（包括如图标签选择器）时，为了美化其样式，往往使用JS去实现，实际上，利用 label标签和css的兄弟选择器完全可以实现类似效果。其兼容性也并不差，至少兼容 IE8及其以上浏览器了。

选择器解释

1. ~ 选择器：查找某一个元素的后面的所有兄弟元素

2. + 选择器：查找某一个元素的后面紧邻的兄弟元素

css:

    .tags-select {

      font-size: 0;

      >.tag-select {

        display: inline-block;

        font-size: 14px;

        margin: 5px;

        position: relative;

        font-weight: normal;

        .name {

          display: block;

          line-height: 20px;

          padding: 8px 10px;

          border: 1px solid #ccc;

          cursor: pointer;

        }

        //设置radio不可见

        input[type="radio"] {

          position: absolute;

          opacity: 0;

          z-index: -1;

          //选中

          &:checked+.name {

            border-color: #e3393c;

          }

          //禁用

          &:disabled+.name {

            background: #eee;

            color: #999;

            cursor: not-allowed;

          }

        }

      }

    }

html:

    <label class="tag-select">

      <input type="radio" name="bye-type" value="1">

      <span class="name">官方标配</span>  

    </label>

    <label class="tag-select">

      <input type="radio" name="bye-type" value="2" checked>

      <span class="name">移动优惠购</span>  

    </label>

    <label class="tag-select">

      <input type="radio" name="bye-type" value="3" disabled>

      <span class="name">联通优惠购</span>  

    </label>