小程序，radio隐藏勾选+数组的使用

实现样式

点击“乘车人”按钮，可填写更多乘车人信息

这里的radio隐藏了原来的勾选框，点击label也可以实现勾选

使用了for循环，点击radio和输入input，都会改变for循环的数组

wxml

<!--pages/write/index.wxml-->
<view class="container">
	<!-- radio的使用 -->
	<!-- 数组 的使用 -->
	<van-button type="info" plain bind:click="add" >+乘车人</van-button>
	<view wx:for="{{perple_list}}" class='single'>
		<view class='row'>
			<label>性别</label>
			<radio-group class="radio-group" data-index="{{index}}" bindchange="radioChange">
				<label class="radio">
					<radio value="male" checked="{{item.sex=='male'}}" />
					<text class="leftText {{item.sex=='male'?'checkLabel':'uncheckLabel'}}">男</text>

				</label>
				<label class="radio">
					<radio value="female" checked="{{item.sex=='female'}}" />
					<text class="rightText {{item.sex=='female'?'checkLabel':'uncheckLabel'}}">女</text>
				</label>
			</radio-group>
		</view>
		<view class="row">
			<label>姓名</label>
			<input value="{{item.name}}" data-index="{{index}}" bindinput="name_input" placeholder="请输入姓名"></input>
		</view>
		<view class="row">
			<label>手机号</label>
			<input value="{{item.phone}}" data-index="{{index}}" bindinput="phone_input" placeholder="请输入手机号"></input>
		</view>
	</view>
	<van-button type="info" bind:click="confirm" round block>确定</van-button>
</view>

wxss

/* pages/write/index.wxss */
page{
    background: rgba(238, 238, 238, 0.479);
}

.single {
    background: white;
    width:100vw;
    margin: auto;
    padding-bottom: 5rpx;
    margin-bottom: 20rpx;
}

radio {
    /* 隐藏radio的勾选 */
    display: none;
}

input,
label {
    display: inline-block;

}

input {
    width: 100rpx;
}
.row{
    display: flex;
    flex-direction: row;
    border-bottom: 1rpx solid rgba(211, 211, 211, 0.459);
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    width: 95vw;
    margin: auto;
}
.row>label{
    width: 20vw;
}
.row input,.row radio-group {
    width: 80vw;

}
.radio text{
    display: inline-block;
    border: 1px solid #1989fa;
    text-align: center;
    width: 80rpx;
    height: 50rpx;
}

.checkLabel {
    background: #1989fa;
    color: white;
}

.uncheckLabel {
    color: #1989fa;
    background-color: white;
}

.leftText {
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;

}

.rightText {
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;

}

js

// pages/write/index.js
var {log}=console
Page({

    /**
     * 页面的初始数据
     */
    data: {
        perple_list:[{
            sex:'female',
            name:'',
            phone:''
        }]
    },
    radioChange:function(e){
        log('change')
        var value=e.detail.value
        var index=e.currentTarget.dataset.index
        var list=this.data.perple_list
        list[index]['sex']=value
        this.setData({
            perple_list:list
        })

    },
    confirm:function(){
        var that=this
        log(that.data.perple_list)
    },
    add:function(){
        this.data.perple_list.push({
            sex:'male',
            name:'',
            phone:''
        })
        this.setData({
            perple_list:this.data.perple_list
        })
    },
    phone_input:function(e){
        var index=e.currentTarget.dataset.index
        var value=e.detail.value
        var list=this.data.perple_list
        list[index]['phone']=value
        this.setData({
            perple_list:list
        })
    },
    name_input:function(e){
        var index=e.currentTarget.dataset.index
        var value=e.detail.value
        var list=this.data.perple_list
        list[index]['name']=value
        this.setData({
            perple_list:list
        })
    },

})```