label标签

label标签：

    不向用户展示任何特殊内容,它的作用是把自己与其他标签"绑定"起来

关联方式：

    显式关联：显式联系通过<label>的 "for" 属性和目标标签的 id属性来完成

 

  　　　 <input type="radio" name="yes-no" id="yes">确定
        <input type="radio" name="yes-no" id="no">取消
        <label for="yes">点击这里也可选择 确定 选项</label>
        <label for="no">点击这里也可以选择 取消 选项</label>

 

    隐式关联：通过标签嵌套完成

    <input type="radio" name="yes-no" id="yes">确定

    <input type="radio" name="yes-no" id="no">取消

    此时点击文字确定和取消没有选中作用，如果要点击文字也能达到选中文字的效果，可以使用label（element-ui的单选，多选框都是用label包住文字）

    <label><input type="radio" name="yes-no" id="yes">确定</label>

    <label><input type="radio" name="yes-no" id="no">取消</label>

    在下拉框中，由于文字和框框中间空隙过多，不偏向使用label包住两者，更好的方案是通过包住两者的这个div添加事件来实现

    <div v-for="brand in brands" @click="handleItemClick">

        {{brand}}

        <el-checkbox v-model="brands" :label="brand"></el-checkbox>

    </div>

    // 点击整一个子项的时候，通过jquery找到下面的input元素，并触发input的点击事件

    handleItemClick(e) {

        if ($(e.target).prop('tagName') == 'DIV') {

            $($(e.target).find('input')[0]).trigger('click');

        }

    }