微信小程序如何實現(xiàn)radio單選框單擊打勾和取消

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

10年積累的做網站、成都網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站制作后付款的網站建設流程，更有恩施土家免費網站建設讓你可以放心的選擇與我們合作。

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:

 <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)
 },

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

以上。

網頁標題：微信小程序如何實現(xiàn)radio單選框單擊打勾和取消
標題鏈接：http://chinadenli.net/article36/joeisg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網頁設計公司、動態(tài)網站、網站設計公司、品牌網站設計、虛擬主機、Google

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

微信小程序如何實現(xiàn)radio單選框單擊打勾和取消