微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消
更新時(shí)間：2020年01月21日 14:40:55 作者：致愛麗絲
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
前端使用input 來寫radio,小程序使用radio標(biāo)簽 也可以使用<radio />單標(biāo)簽
1.自定義radio樣式、
wx默認(rèn)的是真的丑
/* 單選框樣式 */
/* 初始樣式 */
radio .wx-radio-input{
width: 32rpx;
height: 32rpx;
border-radius: 0
}
/* 選中后的 背景樣式 （ 背景 邊框 ） */
radio .wx-radio-input.wx-radio-input-checked{
width: 32rpx; /* 選中后對(duì)勾大小，不要超過背景的尺寸 */
height: 32rpx; /* 選中后對(duì)勾大小，不要超過背景的尺寸 */
background:white!important;
}
/* 選中后的 對(duì)勾樣式 */
radio .wx-radio-input.wx-radio-input-checked::before{
width: 32rpx; /* 選中后對(duì)勾大小，不要超過背景的尺寸 */
height: 32rpx; /* 選中后對(duì)勾大小，不要超過背景的尺寸 */
line-height: 32rpx;
text-align: center;
font-size:36rpx; /* 對(duì)勾大小 */
color:black; /* 對(duì)勾顏色 */
background: white;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
2.單選打勾再選打勾取消效果
wxml:
<radio checked='{{check}}' id="radios" bindtap='radiocon'></radio><label for="radios">匿名</label>
wx.js
//這條代碼在data里寫
check:false
radiocon:function(e){
this.setData({
check: !this.data.check
})
console.log("用戶打勾的是 ",this.data.check)
},
這樣 就完成了單擊打勾再擊取消。
以上。
相關(guān)文章
Echarts實(shí)例教程之樹形圖表的實(shí)現(xiàn)方法
眾所周知echarts是一個(gè)純JavaScript的圖標(biāo)庫,下面這篇文章主要給大家介紹了關(guān)于Echarts實(shí)例之樹形圖表的實(shí)現(xiàn)方法,需要的朋友可以參考下2021-08-08
uniapp項(xiàng)目實(shí)踐封裝通用請(qǐng)求上傳以及下載方法總結(jié)
在日常開發(fā)過程中,前端經(jīng)常要和后端進(jìn)行接口聯(lián)調(diào),獲取并且渲染數(shù)據(jù)到頁面中,接下來就總結(jié)一下?uniapp?中獲取請(qǐng)求、文件下載和上傳的一些方法2023-09-09
Javascript結(jié)合css實(shí)現(xiàn)網(wǎng)頁換膚功能
現(xiàn)在網(wǎng)站換皮膚是比較常見的功能，大多數(shù)論壇都有的，要想實(shí)現(xiàn)這樣效果可以看如下代碼.2009-11-11
js寫一個(gè)字符串轉(zhuǎn)成駝峰的實(shí)例
寫一個(gè)字符串轉(zhuǎn)成駝峰的方法，使用js代碼實(shí)現(xiàn)，具體如下，感興趣的朋友可以了解下哈2013-06-06
這篇文章主要是對(duì)JS事件在IE與FF中的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要為大家介紹了JS中的Promise.race控制并發(fā)量的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能
最近在學(xué)微信小程序開發(fā)的時(shí)候,碰上了一個(gè)問題,所以想著總結(jié)下,這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能的相關(guān)資料,需要的朋友可以參考下2022-04-04
JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了使用js獲取身份證年齡的示例代碼，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12