uniapp简单的复选框

只有一个的复选框

<view style="display: flex;justify-content: center;align-items: center;margin-top: 60upx;">
	<checkbox-group  @change="selectCk">
		<label style="display: flex;flex-direction: row;font-size: 28upx;">
			<checkbox value="yes"/><span style="display: flex;flex-direction: row;">我已经阅读并接受<navigator url="../xieyi/xianyi" open-type="navigate" style="color: #FF6000;border-bottom: 1px solid  #FF6000;">入驻协议</navigator></span>
		</label>
	</checkbox-group>
</view>
<button type="default" class="login" hover-class="hover" formType="submit">提交</button>

js逻辑,获取值,并判断他是否选中,并通过form表单提交到后台

<script>
	export default {
		data() {
			return {
				namesel:'',
			};
		},
		onLoad() {
		},
		methods: {
			selectCk:function(e){
				console.log('eee',e)
				this.namesel=e.detail.value	//定义namesel获取复选框的数组值
				console.log('namesel的值',this.namesel)
			},
			register(e) {
				if (this.namesel== '' ||this.namesel==null||this.namesel==undefined) {
					alert('请勾选入驻协议');
					return false;
				}
				var namesel=this.namesel;
				this.http("/api/xx/xx",'post',{
					namesel:namesel
				}).then(res=>{
					if(res.data.code === 1){
						uni.switchTab({
						    url: '/pages/index/index'
						});
					}
				})
			},
			
		}
	}
</script>

多个的复选框,多加一个获取到的值以逗号隔开this.namesel=this.namesel.join(",")

<view style="display: flex;justify-content: center;align-items: center;margin-top: 60upx;">
	<checkbox-group  @change="selectCk">
		<label style="display: flex;flex-direction: row;font-size: 28upx;">
			<label>选择:</label>
				<label>
					<checkbox value="选项1" /><text>选项1</text>//定义复选框的内容1
					<checkbox value="选项2" /><text>选项2</text>//定义复选框的内容2
					<checkbox value="选项3" /><text>选项3</text>//定义复选框的内容1
					<checkbox value="选项4" /><text>选项4</text>//定义复选框的内容2
				</label>
		</label>
	</checkbox-group>
</view>
<button type="default" class="login" hover-class="hover" formType="submit">提交</button>

js逻辑,获取值,并判断他是否选中,并通过form表单提交到后台

<script>
	export default {
		data() {
			return {
				namesel:'',
			};
		},
		onLoad() {
		},
		methods: {
			selectCk:function(e){
				console.log('eee',e)
				this.namesel=e.detail.value	//定义namesel获取复选框的数组值
				this.namesel=this.namesel.join(",") 	//以逗号隔开向后台传递
				console.log('namesel的值',this.namesel)
			},
			register(e) {
				if (this.namesel== '' ||this.namesel==null||this.namesel==undefined) {
					alert('请勾选选项');
					return false;
				}
				var namesel=this.namesel;
				this.http("/api/xx/xx",'post',{
					namesel:namesel
				}).then(res=>{
					if(res.data.code === 1){
						uni.switchTab({
						    url: '/pages/index/index'
						});
					}
				})
			},
			
		}
	}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值