前端使用input 來寫radio,小程序使用radio標簽 也可以使用單標簽

1.自定義radio樣式、

wx默認的是真的丑

/* 單選框樣式 */

/* 初始樣式 */

radio .wx-radio-input{

width: 32rpx;

height: 32rpx;

border-radius: 0

}

/* 選中后的 背景樣式 ( 背景 邊框 ) */

radio .wx-radio-input.wx-radio-input-checked{

width: 32rpx; /* 選中后對勾大小，不要超過背景的尺寸 */

height: 32rpx; /* 選中后對勾大小，不要超過背景的尺寸 */

background:white!important;

}

/* 選中后的 對勾樣式 */

radio .wx-radio-input.wx-radio-input-checked::before{

width: 32rpx; /* 選中后對勾大小，不要超過背景的尺寸 */

height: 32rpx; /* 選中后對勾大小，不要超過背景的尺寸 */

line-height: 32rpx;

text-align: center;

font-size:36rpx; /* 對勾大小 */

color:black; /* 對勾顏色 */

background: white;

transform:translate(-50%, -50%) scale(1);

-webkit-transform:translate(-50%, -50%) scale(1);

}

2.單選打勾再選打勾取消效果

wxml:

匿名

wx.js

//這條代碼在data里寫

check:false

radiocon:function(e){

this.setData({

check: !this.data.check

})

console.log("用戶打勾的是 ",this.data.check)

},

這樣 就完成了單擊打勾再擊取消。

以上。

總結

以上是生活随笔為你收集整理的radio 微信小程序 点击取消_微信小程序如何实现radio单选框单击打勾和取消的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。