关于input的选中

关于input的选中

（注：只会CSS与HYML时的书写）

一：利用lebel与input进行关联

在需要选中的input较少的情况下使用。

  <div>
        <input type="checkbox" id="one">
        <label for="one">123</label>
    </div>

当点击123时，input的复选框会被选中与取消。

当lebel被点击时，数字颜色以及前面的图片都会发生变化，当是input却看不见，可以将input的display值设置为none，即可。当是这个有一个弊端，例如

这样的作为有成千上万个，即每一个input都要设置一个id以及label都有一个不同的for，即有成千上万个值，需要书写，大大增加了代码量以及书写量。因此可以考虑第二种方法；

二：将input把需要展示的东西覆盖

例如上面座位的时候，可以书写一个模板，让后成千上万的复制即可，量出座位的宽高给input设置一个和座位一样的宽高（checked属性），然后利用定位以及z-index将input放置于最上面，然后将其透明化，即以后每一次的点击，都是在点击最上面的input标签，如果想使点击后颜色变化，则将第二张再次透明化即可。（第一个div与第二个div不一样）

<div>
    <input type="checked">
    <div></div>
    <div></div>
</div>

当上述也存在一个问题，例如上面的点赞效果，一个人点赞与9999人点赞占据的宽度是不一样的，应此input需要给多大的宽，不知，应此例如点赞类就用lebel就可，选座用覆盖。

两者结合，选取最优解