使用label美化样式的input点击事件踩坑

如图，做一个类似select的自定义选择框，但可多选。使用label对checkbox样式美化，有两种方式。

1、包裹式，点击事件给label或者li

<li>
	<label class="checkboxLable">
    	<input type="checkbox"/>
		<i>
			<em></em>
		</i>
   	</label>
   	<div>专营店</div>
</li>

.checkboxLable {
    position: relative;
    display: block;
    float: left;
    cursor: pointer;
    width: 20px;
    height: 20px;
    i {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 18px;
        height: 18px;
        background: #fff;
        border: 1px solid #CCCCCC;
        cursor: pointer;
        border-radius: 50%;
    }
    em {
        display: block;
        background: #CCCCCC;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin: 5px auto;
    }
    input[type="checkbox"]:checked+i {
        em {
            background: #FF6700;
        }
    }
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
//      opacity: 0;
        display: none;
    }
}

如上css中，如果把input的opacity设置为0，点击事件会出现以下情况，点击一次会触发两次，一次是被绑定点击事件元素，一次的input的点击事件（选中或未选中）。虽然可以把点击事件给input,但是经样式美化后input，opacity为0的情况下点击区域几乎没有，用户体验会很差，所以，解决办法就是把input样式设置为 display: none，点击事件给label或者li，动态改变input的checked

1、兄弟式，点击事件给label或者li

<li>
    <input type="checkbox" id="option1" />
    <label class="checkboxLable" for='option1'>
	旗舰店
    </label>
</li>

li{
    width: 33.3%;
    float: left;
    box-sizing: border-box;
    padding: 14px;
    padding-right: 0;
    border-bottom: 1px solid #CCCCCC;
    cursor: pointer;
    input {
        display: none;
        cursor: pointer;
    }
    input+label {
        background: url(../img/nochecked.png) no-repeat;
        padding-left: 26px;
        cursor: pointer;
    }
    input:checked+label {
        background: url(../img/checked.png) no-repeat;
        padding-left: 26px;
        cursor: pointer;
    }
}

因为input在这里display:none，事件绑定给label或li都没有问题，input不会触发点击事件。如果把display:none修改成opacity:0，点击事件只能绑定给label，不能绑定给li。因为此时input和label是兄弟节点，通过id和for属性关联，点击事件只会触发一次。绑定给li，就会出现和包裹式一样的问题。

所以，给美化之后的input加点击事件，请将其css设置为display:none，就不会出现点击一次，触发两次点击事件的事情了，完美的解决办法。