只有一个的复选框

<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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐