纯css实现checkbox的checked样式

纯css也能实现checked样式

今天使用微信的WEUI的checkbox的时候，发现点击checkbox是有checked和unchecked的变化的，但是想要去获得checkbox的checked状态时，发现event listener里居然没有该checkbox的click之类的事件。这才发现，weui只是纯粹的css样式，没有对应组件的js代码。那么问题来了，没有js事件，weui是如何实现checkbox的checked样式变化的？

先看看html代码

<div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>standard is dealt for u.</p>
        </div>
    </label>
</div>

据我观察发现，checkbox的checked状态变化是由<i class="weui-icon-checked"></i>这个标签变化实现的。

看看weui里checkbox的css是如何写的

.weui-cells_checkbox .weui-icon-checked:before{
  content:'\EA01';
  color:#c9c9c9;
  font-size:23px;
  display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
  content:'\EA06';
  color:#09BB07;
}

以上就是weui中checkbox在checked状态时的css，观察这段css的选择器，其中的‘+‘是什么意思？‘:checked‘又是什么意思？content的值对应的是啥？

css选择器中‘+‘代表什么？

事实上，‘+‘号代表的是相邻兄弟选择器，举个栗子。
第一个例子，可以在w3school上看到
h1 + p {margin-top:50px;}
在这个例子中，可以看到，只有紧跟h1的那一个p标签应用上了这段css，后面的p标签都没起作用。这也正应了这个选择器的名字，“相邻“兄弟选择器。

我们再来看第二个例子
li + li {font-weight:bold;}
这个例子中，只有第二个和第三个的li标签应用上了css，而第一个并没有被应用上。这说明了，这段css针对的元素是‘+‘号后面的那个元素，而不是对‘+‘号前后都起了作用。这点说白了都懂，但当‘+‘号前后标签相等，比如例二时，比较容易被迷惑。
回到例二，由于只对相邻的两个li标签中的后者起作用，所以，当有三个并列的li标签时，只有后两个应用了该css

‘css中:checked‘是什么意思？

根据w3school中的说明，‘:checked‘也是一种选择器，用来选择input被checked的元素

content对应的值是啥？

content对应的值事实上是字符编码，具体对应的样式，可以自己制定。

回头来看刚刚的css代码

.weui-cells_checkbox .weui-icon-checked:before{
  content:'\EA01';
  color:#c9c9c9;
  font-size:23px;
  display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
  content:'\EA06';
  color:#09BB07;
}

现在再来看，那么意思就很明确了。当class为weui-check的input被checked时，将紧跟其后的weui-icon-checked改为选中状态，css样式作出相应的变化，即颜色变绿，内容变为对勾。当为非checked状态时，前一段css代码就起作用了，颜色变灰，内容为空圆圈。

总结

学习到了纯css，不经过js更改checkbox的样式的方法。以前用Semantic UI都是对checkbox增删checked class来实现样式变化，这次倒是打开新世界大门了。或许这种css控制样式更改才是本来的做法，我有些倒置了。
最近一直也在反思，研究生期间做的这些活，为了满足开发速度，都是现查现用，都没有好好思考背后的原理，背后的技术，越来越变得像“培训机构出来的“了。能做业务，但是技术基础很差，问下原理就都不懂了。惭愧惭愧，这也是自己的原因，没有在空闲时补充基础，唉，努力吧，学海无涯。
btw，jq获取checkbox是否被checked的方法：
$('.checkbox').is(':checked')注意checked前面有冒号！