input为checkbox时点击当前行选中以及labe与input之间的联系。

最新推荐文章于 2024-04-29 16:59:17 发布

好山好水好风情

最新推荐文章于 2024-04-29 16:59:17 发布

阅读量563

点赞数 1

分类专栏： JS 前端

本文链接：https://blog.csdn.net/weixin_43847454/article/details/98062492

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

1、如果有一个input他的type为checkbox,后面又有一对的文字，或者是像微信转发的一样。要的效果是点击当前行input会选中，这时候我们可以可以将label写在input的后面，然后给input设置一个id,label设置一个id，记住这两个id要对应起来才可以哦。

2、获取一个input的值，拿vue举例，我们需要用上v-bind:value的形式给input绑定上我们需要的值，然后v-model是用数组的。例如在data里面设置一个checkList:[]，然后再写v-model='checkList',点击选中当前筛选框，然后去console出来，就可以获取到我们绑定的value值啦。附上代码：（我这里的:value这么写是因为我后面需要切割出来做两个数据，如果只是需要一个数据，不需要这么写啊。直接把id值绑定上去就好了。你们需要的话要自己改下啊。）

<input type="checkbox" :value=`:${item.uid}:friend` :id='item.uid' v-model='checkTest' class="js-check my-mgr-5">
                            <label :for='item.uid' class="flex-row flex-c my-w-100 my-mgl-10 my-cl-grey">
                                <img class="pop__avatar-small my-radius-5 flex-shrink" style="width:30px; height:30px;" :src="item.avatar">
                                <p class="pop__flex1 my-mgl-10 name-bottom my-relative my-font-14" style="width: 88%" v-html="item.remark || item.name" 
                                ></p>
                            </label>