uniapp12-复选框的使用

1、复选框的使用

接下来我们新建一个页面，然后尝试一下复选框的使用

接下来我们就完善一下我们的用户信息界面

这里跳转页面我们还是和之前一样，直接在首页给插入一个

<view>
    <button @click="topage('/pages/component/userinfo/userinfo')">用户信息</button>
</view>

看一下我们的效果，然后我们进行相关的跳转

接下来完善我们的页面信息

这里也是直接上代码，然后我们看看我们的效果

<template>
<view class="userinfo pad20">
        <view>
        我是用户信息界面
</view>
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->

<view>
<view>
        <form @submit="formSubmit" @reset="formReset">
                <view class="uni-form-item uni-column">
                        <view class="title">switch</view>
                        <view>
                                <switch name="switch" />
                        </view>
                </view>
                <view class="uni-form-item uni-column">
                        <view class="title">radio</view>
                        <radio-group name="radio">
                                <label>
                                        <radio value="radio1" /><text>选项一</text>
                                </label>
                                <label>
                                        <radio value="radio2" /><text>选项二</text>
                                </label>
                        </radio-group>
                </view>
                <view class="uni-form-item uni-column">
                        <view class="title">checkbox</view>
                        <checkbox-group name="checkbox">
                                <label>
                                        <checkbox value="checkbox1" /><text>选项一</text>
                                </label>
                                <label>
                                        <checkbox value="checkbox2" /><text>选项二</text>
                                </label>
                        </checkbox-group>
                </view>
                <view class="uni-form-item uni-column">
                        <view class="title">slider</view>
                        <slider value="50" name="slider" show-value></slider>
                </view>
                <view class="uni-form-item uni-column">
                        <view class="title">input</view>
                        <input class="uni-input" name="input" placeholder="这是一个输入框" />
                </view>
                <view class="uni-btn-v">
                        <button form-type="submit">Submit</button>
                        <button type="default" form-type="reset">Reset</button>
                </view>
        </form>
</view>
</view>
</view>

</template>

<script>
export default {
        data() {
                return {
                }
        },
        methods: {
                formSubmit: function(e) {
                        console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                        var formdata = e.detail.value
                        uni.showModal({
                                content: '表单数据内容：' + JSON.stringify(formdata),
                                showCancel: false
                        });
                },
                formReset: function(e) {
                        console.log('清空数据')
                }
        }
}
</script>


<style>
	.userinfo{
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>

页面比较简约一些，但是功能什么的还挺完善的，接下来我们试着使用一下我们这里复选框的数值

2、复选框取值

复选框的部分如下，接下来我们先从点击按钮之中获取一下值

	<view class="uni-form-item uni-column">
						<view class="title">checkbox</view>
						<checkbox-group name="checkbox" >
							<label>
								<checkbox value="checkbox1" /><text>选项一</text>
							</label>
							<label>
								<checkbox value="checkbox2" /><text>选项二</text>
							</label>
						</checkbox-group>
					</view>

这里官方给我们的案例之中使用了form表单的提交

<form @submit="formSubmit" @reset="formReset">

formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
},

从提交按钮之中我们可以看到值，毫无问题是可以拿到的。

这种拿值得方法我们很简单就可以掌握

3、双向绑定取值踩坑

接下来我们呢改造成v-model双向绑定的方式尝试一下

<checkbox-group name="checkbox" v-model="selectedChecks">
            <label>
                    <checkbox value="运动" /><text运动</text>
            </label>
            <label>
                    <checkbox value="跑步" /><text>跑步</text>
</label>
</checkbox-group>

selectedChecks: [], //选中的数据数组

然后我们呢输出尝试一下
formSubmit: function(e) {
				console.log(this.selectedChecks,'selectedChecks----v-model绑定的值');
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
},

这里我们可以直接看到报错，查看我们的官网可以发现，官方其实并没有提供v-model的方法

4、官方推荐取值方式（form方式）

换成官方推荐的value然后我们尝试一下，ok!

这里我们一定要注意，就是看官方文档

尝试一下value身上的值，这边我们采用以下两种方式进行尝试，结果我们都拿不到

<checkbox-group name="checkbox" value="selectedChecks">
<checkbox-group name="checkbox" :value="selectedChecks">

官方给我们的显示是其实这个是checkbox身上的

5、官方推荐（change事件方式）

再来试试checkbox-group 身上的change事件，我们发现从这里也能拿到checkbox身上的值,这里我们也可以采用这种方式进行尝试

接下来我们写一个监听事件，然后测试一下这个change事件，在下面输出看看

<checkbox-group name="checkbox"  @change="handleChangecheck">
            <label>
                    <checkbox value="运动" /><text>运动</text>
            </label>
            <label>
                    <checkbox value="下棋" /><text>下棋</text>
            </label>
</checkbox-group>

// 这里我们输出然后查看一下
handleChangecheck(e){
    console.log('复选框改变',e.detail.value);
},

这里我们可以看到选择以后我们已经可以拿到其中的值,接下来我们就可以继续进行需要的任何操作了！