当前位置: 首页 > 工具软件 > InputLabel > 使用案例 >

label标签的for属性要指向input的id属性一致

步浩壤
2023-12-01

html:
<input class="a" id="one" type="text"></input>

 

            <div class="a" id="two">eeeeeeee</div>
        
            <label for="one">点我试试!!</label>    //for 的作用:相当于将id=“one”的标签绑定到了label上,

js:
<script>

 

    $("#one").on("mouseenter",fff)
    $("#one").on("mouseleave",ggg)


    function fff(){
        $("#two").css("background-color","red");
    }
    function ggg(){
        $("#two").css("background-color","#999999");
    }
</script>

1.label 里的那个for属性 是指向input 等表单里的元素,方便 输入框获取焦点
2.label的for属性的值与 要指向input的id属性一致,就像这样

<label for="one"> </label>
<input type="text" id="one" />
3.你现在的js代码里,就可以用$("#one") 获取到 input了。

在vue中同样道理:

<h3>多选绑定一个数组</h3>
       <p>
            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
            <label for="JSPang">JSPang</label><br/>
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="Panda">Panda</label><br/>
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="PanPan">PanPan</label>
            <p>{{web_Names}}</p>
       </p>
 类似资料: