移动端改变原生checkbox样式

<div :class="[item.status==0?'changshi1':'changshi']">

<input type="checkbox" id="checkbox"  name="test" :value="item.deviceId" @click="change($event,item.deviceId)" v-model="item.status">

</div>

这个是要获取到循环列表中的点击后的checkbox列表所有点击的deviceid，思路是将点击后的记录一下将id存到一个数组中

change(event,deviceId,status){

if(event.target.checked ==true){

this.selectMessageList.push(deviceId)}

if(event.target.checked ==false) {

for(let i =0;i<this.selectMessageList.length;i++)

if(this.selectMessageList[i] == deviceId){

this.selectMessageList.splice(i,1)

}}}},

发现ios和安卓上样式不一样需要自定义

没有选中执行changshi1类，选中了执行changshi类

.changshi1{

float:right;

width:18px;

height:18px;

border:1px solid #ccc;

border-radius:50%;

padding:2px;

display:flex;

margin-top:14px;

justify-content:center;

box-sizing:border-box;

}

.changshi{

float:right;

width:18px;

height:18px;

border:1px solid #4378BA;

border-radius:50%;

padding:2px;

display:flex;

margin-top:14px;

justify-content:center;

box-sizing:border-box;

}

#checkbox{

width:12px;

height:12px;

vertical-align:middle;

-webkit-appearance:none;

/*margin-left:11px;*/

  background:#fff;

border:none;

outline:none;

border-radius:50%;

box-sizing:border-box;

}

#checkbox:checked{

background:#4378BA;

border:1px solid #4378BA;

content:"\a0";

}