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