多选按钮设置透明，重新画按钮后，如何能够实现对应的点击事项？

如图，我想要实现这样的多选的功能。

hml:

<div class="detail">
<div for="{{familymember}}" tid="id">
    <div>
        <div class="{{$item.checked?'visitor_on':'visitor_off'}}">
        //三元表达式判断一下状态，visitor_on是方框被选中状态，visitor_off是未选中状态。
            <input type="checkbox" name='visitor' value='{{$item.name}}' checked="false"  onchange="visitoronchange" class="visitor_rad"></input></div>
        <text class="{{$item.checked?'visitortext_on':'visitortext_off'}}">
      //三元表达式判断一下状态，visitortext_on是方框后面的文字被选中状态，visitor_off是未选中状态。 
            {{$item.name}}</text>
    </div>
</div>
</div>

数组的情况：

{{familymember}}这个，长这样，

familymember:

        [

            {name:"煊煊",telephone:"12345567898",gender:"女",age:"26岁"，checked：false},

            {name:"闲潭",telephone:"12345567898",gender:"女",age:"18”，checked：false},

            {name:"小甲",telephone:"12345567898",gender:"女",age:"18岁"，checked：false},

            {name:"乙乙乙甲乙丙丁",telephone:"12345567898",gender:"女",age:"18岁"，checked：false},

            {name:"饼饼饼",telephone:"12345567898",gender:"女",age:"18岁"，checked：false},

            {name:"顶顶顶",telephone:"12345567898",gender:"女",age:"18岁"，checked：false}

        ]

在js里面设置onchange事件的时候，我发现

visitoronchange(e) {

    console.log('选择了' + e.value)}

e.value打印出来显示为undefined。

那么应该如何才能知道多选是点击了谁呢？以及相应的能够将被点击的项目变成选中状态。