微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消
更新時(shí)間：2020年01月21日 14:40:55 作者：致愛(ài)麗絲
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
前端使用input 來(lái)寫(xiě)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ì)勾大小，不要超過(guò)背景的尺寸 */
height: 32rpx; /* 選中后對(duì)勾大小，不要超過(guò)背景的尺寸 */
background:white!important;
}
/* 選中后的 對(duì)勾樣式 */
radio .wx-radio-input.wx-radio-input-checked::before{
width: 32rpx; /* 選中后對(duì)勾大小，不要超過(guò)背景的尺寸 */
height: 32rpx; /* 選中后對(duì)勾大小，不要超過(guò)背景的尺寸 */
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里寫(xiě)
check:false
radiocon:function(e){
this.setData({
check: !this.data.check
})
console.log("用戶打勾的是 ",this.data.check)
},
這樣 就完成了單擊打勾再擊取消。
以上。
相關(guān)文章
用js實(shí)現(xiàn)計(jì)算加載頁(yè)面所用的時(shí)間
用js實(shí)現(xiàn)計(jì)算加載頁(yè)面所用的時(shí)間的代碼，需要的朋友可以參考下。2010-04-04
Display SQL Server Version Information
Display SQL Server Version Information...2007-06-06
JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng)
這篇文章主要介紹了JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng),文中通過(guò)使用自定義熱鍵或者使用鍵盤(pán)上下左右鍵移動(dòng)圖片，以此來(lái)實(shí)現(xiàn)此功能，需要的朋友可以參考下2019-10-10
indexOf()?方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下2023-02-02
在JavaScript中遇到處理錯(cuò)誤很讓人頭疼，這篇文章整理了JavaScript錯(cuò)誤處理實(shí)踐，有需要的小伙伴們可以參考。2016-07-07
JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊(cè)、表單驗(yàn)證、運(yùn)算符的代碼示例，有興趣的朋友們可以測(cè)試學(xué)習(xí)下。2018-10-10
這篇文章主要為大家介紹了全解跨域請(qǐng)求問(wèn)題處理方法及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-07-07
用apply讓javascript函數(shù)僅執(zhí)行一次的代碼
有時(shí)候我們只想要讓某些腳步函數(shù)執(zhí)行一次就算完成任務(wù)了。如何實(shí)現(xiàn)這種功能呢？簡(jiǎn)單模仿下面這段就可以輕松搞定了2010-06-06
若要在使用ajax請(qǐng)求后處理發(fā)送請(qǐng)求返回的結(jié)果，最好使用同步請(qǐng)求，下面為大家介紹下js中同步與異步處理的方法和區(qū)別，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
這篇文章主要介紹了在一般處理程序（ashx）中彈出js提示語(yǔ)的相關(guān)資料,需要的朋友可以參考下2017-08-08