表单组件_表单组件radio

在之前的文章中我们讲了checkbox多选框组件的使用，现在让我们来看下radio单选框组件：

单选框其实和多选框一样，是通过radio标签来实现的。并且在外面套了一个radio-group的组件。其中value是radio的标识，checked表示了是否被选中。下面让我们通过一个实例来看下吧：

<!--index.wxml-->
<view class="container">
    <view class="page-body">
        <view class="page-section page-section-gap">
            <view class="page-section-title">默认样式</view>
            <label class="radio">
                <radio value="r1" checked="true"/>选中
            </label>
            <label class="radio">
                <radio value="r2" />未选中
            </label>
        </view>
        <view class="page-section">
            <view class="page-section-title">推荐展示样式</view>
            <view class="weui-cells weui-cells_after-title">
                <radio-group bindchange="radioChange">
                    <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
                        <view class="weui-cell__hd">
                            <radio value="{{item.value}}" checked="true" />
                        </view>
                        <view class="weui-cell__bd">{{item.name}}</view>
                    </label>
                </radio-group>
            </view>
        </view>
    </view>
</view>
//index.js
Page({
    data: {
        items: [
            {value: 'USA', name: '美国'},
            {value: 'CHN', name: '中国', checked: 'true'},
            {value: 'BRA', name: '巴西'},
            {value: 'JPN', name: '日本'},
            {value: 'ENG', name: '英国'},
            {value: 'FRA', name: '法国'},           
        ]
    },
    radioChange: function(e) {
        console.log('radio发生change事件，携带value制为：', e.detail.value)
        var items = this.data.items;
        for (var i = 0, len = items.length; i < len; ++i) {
            items[i].checked = items[i].value == e.detail.value
        }
        this.setData({
            items: items
        });
    }
})

今天的内容就到这里了，我没下期再见。