本文实例为大家分享了微信小程序实现性别单选的具体代码，供大家参考，具体内容如下

效果图：

代码：

html:

<view class="inputbox">         <view class="inptxt">性别</view>         <view class="inpbox">           <radio-group bindchange="radioChange" class="inp radiogroup">             <view class="radiobox" wx:for="{{sex}}" wx:key="value">               <radio value="{{item.id}}" color="#ff0000" checked="{{item.checked}}"/>               <view class="radiotxt">{{item.value}}</view>             </view>           </radio-group>                   </view> </view>

js:

data:{     sex: [{       id: 1,       value: '男'     }, {       id: 2,       value: '女'     }], } // sexinp   radioChange: function (e) {     // console.log('radio发生change事件，携带value值为：', e.detail.value)     const sex = this.data.sex     for (let i = 0, len = sex.length; i < len; ++i) {       sex[i].checked = sex[i].id == e.detail.value     }     this.setData({       sex     })     console.log(this.data.sex);   },

(注意：post提交时，提交的是选中的性别的id，所以需要把选中的id 提出来，再提交)

postaddManage: function () {     let sex = '';     this.data.sex.map((item, index) => {       if (item.checked) {         sex = item.id;       }     })     let params = {         sex: sex,     }     addManage(params).then(res => {         console.log(res);     }) }

css(less):

.inputbox {         display: flex;         flex-direction: row;         // justify-content: space-between;         width: 100%;         height: 80rpx;         line-height: 80rpx;         margin-top: 10rpx;         border-bottom: 1px solid #f1f1f1;         font-size: 32rpx;         color: #353535;         .inptxt {           white-space: nowrap;         }         .inpbox {           width: 100%;           margin-left: 20rpx;           display: flex;           flex-direction: row;           justify-content: space-between;           .inp {             position: relative;             width: 100%;             height: 80rpx;           }           .telinpbox {             width: 240rpx;             // height: 52rpx;             overflow: hidden;             margin-top: 10rpx;             .telinp {               width: 55rpx;               height: 55rpx;               overflow: hidden;               margin-left: 25rpx;             }           }           .radiogroup {             display: flex;             flex-direction: row;             .radiobox {               display: flex;               flex-direction: row;               margin-left: 50rpx;             }           }         } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。