uni——单选、多选

单选

案例演示

案例代码

<radio-group @change="radioChange">
	<label v-for="(item, index) in radioList" :key="item.value"
		:class="index === current?'option_active item':'option_default item'">
		<view class="radioHidden">
			<radio :value="item.value" :checked="index === current" />
		view>
		<view>{{item.value}}. {{item.title}}view>
	label>
radio-group>
1
2
3
4
5
6
7
8
9

data() {
	return {
		// 单选题
		radioList: [{
				value: 'A',
				title: '基本法',
			},
			{
				value: 'B',
				title: '根本法'
			},
			{
				value: 'C',
				title: '一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法'
			},
			{
				value: 'D',
				title: '普通法律'
			}
		],
		current: '',
		// 单选的选中项
		radioValue: '',
	}
},
methods: {
	// 单选题
	radioChange(evt) {
		for (let i = 0; i < this.radioList.length; i++) {
			if (this.radioList[i].value === evt.detail.value) {
				this.current = i;
				break;
			}
		}
		this.radioValue = this.radioList[this.current].value
		console.log(this.radioValue);
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.item {
	display: flex;
	padding: 16rpx 27rpx;
	margin-bottom: 10rpx;
	background: #D45A53;
	border-radius: 31rpx;
	font-size: 30rpx;
	color: #FFFFFF;
}

// 选中的颜色
.option_active {
	background: #D52101;
}

// 默认颜色
.option_default {
	background: #D45A53;
}
.radioHidden {
	display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

网址

因为单选按钮不需要展示，所以需要隐藏掉
https://uniapp.dcloud.net.cn/component/radio.html

多选

案例演示

案例代码

<checkbox-group @change="checkboxChange">
	<label v-for="(item, index) in checkboxList" :key="item.value"
		:class="item.checked?'option_active item':'option_default item'">
		<view class="checkboxHidden">
			<checkbox :value="item.value" :checked="item.checked" />
		view>
		<view>{{item.value}}. {{item.title}}view>
	label>
checkbox-group>
1
2
3
4
5
6
7
8
9

data() {
	return {
		// 多选题
		checkboxList: [{
				value: 'A',
				title: '基本法',
			},
			{
				value: 'B',
				title: '根本法'
			},
			{
				value: 'C',
				title: '一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法'
			},
			{
				value: 'D',
				title: '普通法律'
			}
		],
		// 复选的选中项
		checkValue: []
	}
},
methods: {
	// 多选题
	checkboxChange(e) {
		var items = this.checkboxList,
			values = e.detail.value;
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if (values.includes(item.value)) {
				this.$set(item, 'checked', true)
			} else {
				this.$set(item, 'checked', false)
			}
		}
		this.checkValue = values.sort();//将其排个序
		console.log(this.checkValue);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.item {
	display: flex;
	padding: 16rpx 27rpx;
	margin-bottom: 10rpx;
	background: #D45A53;
	border-radius: 31rpx;
	font-size: 30rpx;
	color: #FFFFFF;
}

// 选中的颜色
.option_active {
	background: #D52101;
}

// 默认颜色
.option_default {
	background: #D45A53;
}

.checkboxHidden {
	display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

其他样式

代码

<checkbox-group @change="checkboxChange">
	<label v-for="(item, index) in checkboxList" :key="item.value"
		:class="item.checked?'option_active checkCss':'option_default checkCss'">
		<view class="checkboxHidden">
			<checkbox :value="item.value" :checked="item.checked" />
		view>
		<view class="checkCircle">view>
		<view class="checkTxt">{{item.title}}view>
	label>
checkbox-group>
1
2
3
4
5
6
7
8
9
10

checkboxList: [{
		value: '1',
		title: '基本法',
	},
	{
		value: '2',
		title: '根本法'
	},
	{
		value: '3',
		title: '一般法律法'
	},
	{
		value: '4',
		title: '普通法律'
	}
],
// 复选的选中项
checkValue: [],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 日期复选框
checkboxChange(e) {
	var items = this.checkboxList,
		values = e.detail.value;
	for (var i = 0, lenI = items.length; i < lenI; ++i) {
		const item = items[i]
		if (values.includes(item.value)) {
			this.$set(item, 'checked', true)
		} else {
			this.$set(item, 'checked', false)
		}
	}
	this.checkValue = values.sort();
	console.log(this.checkValue);
},
//日期重置
resetBtn() {
	console.log("重置");
	this.checkboxList.forEach((item) => {
		console.log(item);
		item.checked = false
	})
	this.checkValue = []
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.checkCss {
	display: flex;
	align-items: center;
	height: 100rpx;
	border-top: 1rpx solid #E6E6E6;
	font-size: 28rpx;
}

// 选中的颜色
.option_active {
	color: orange;
	position: relative;
}

.option_active::after {
	content: '';
	position: absolute;
	left: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	background-color: #F47428;
}
.option_active::before{
	content: '';
	position: absolute;
	left: 35rpx;
	top: 42%;
	transform: translateY(-50%);
	width: 18rpx;
	height: 10rpx;
	border-left:2rpx solid #ffffff;
	border-bottom:2rpx solid #ffffff;
	transform: rotate(-45deg);
	z-index: 4;
}
// 默认颜色
.option_default {
	color: #000000;
	position: relative;
}

.option_default::after {
	content: '';
	position: absolute;
	left: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	border: 1rpx solid #484848;
	box-sizing: border-box;
}

.checkboxHidden {
	display: none;
}

.checkTxt {
	margin-left: 80rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

如果打印文字

网址

因为复选按钮不需要展示，所以需要隐藏掉，点击顺序不同时，会出现[‘D’,‘A’]的顺序，使用js拍个序即可
https://uniapp.dcloud.net.cn/component/checkbox.html

其他类型多选

<template>
	<view class="content">
		<checkbox-group @change="checkboxChange">
			<view v-for="(item, index) in checkboxList" :key="item.value">
				<view class="siteBox">
					<view class="checkTxt">{{item.title}}view>
					<view class="checkboxHidden">
						<checkbox :value="item.value" :checked="item.checked" color="#0000ff"
							style="transform:scale(0.7)" />
					view>
				view>
				<view class="showBox" v-if="item.checked">
					<view class="inputBox">
						<view class="left">分成比例view>
						<view class="right"><input type="text" placeholder="比例填写" v-model="item.num1">view>
					view>
					<view class="inputBox">
						<view class="left">扫码比例view>
						<view class="right"><input type="text" placeholder="比例填写" v-model="item.num2">view>
					view>
				view>
			view>
		checkbox-group>
		<button @click="baocun">保存button>
	view>
template>

<script>
	export default {
		data() {
			return {
				checkboxList: [{
						value: '1',
						title: '场地1',
						num1:'',
						num2:'',
					},
					{
						value: '5',
						title: '场地2',
						num1:'',
						num2:'',
					},
					{
						value: '7',
						title: '场地3',
						num1:'',
						num2:'',
					},
					{
						value: '89',
						title: '场地4',
						num1:'',
						num2:'',
					}
				],
				// 复选的选中项
				checkValue: [],
				subList:[]

			}
		},
		onLoad() {

		},
		methods: {
			// 日期复选框
			checkboxChange(e) {
				var items = this.checkboxList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				} 
				console.log(this.checkValue);
			},
			baocun(){
				this.subList=[]
				this.checkboxList.forEach((item)=>{
					if(item.checked == true){
						this.subList.push(item)
					}
				})
				console.log(this.checkboxList);
				console.log(this.subList);
			}
		}
	}
script>

<style lang="scss">
	.siteBox {
		margin: 0 20rpx;
		// border: 1px solid red;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.showBox {
		margin: 0 20rpx;

		.inputBox {
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			padding: 10rpx 0;
			input{
				text-align: right;
				font-size: 26rpx;
			}
		}
	}

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

案例样式

uni+vue2+uview2.0

案例代码

<view class="row">
	<view class="rowLeft">订单备注view>
	<view class="rowRight" @click="openRemark">
		<text :class="{'remarkCss':true,'garyColor': remarkValue=='',}">{{remarkValue?remarkValue:'选填，可填写配送注意事项等'}}text>
	view>
view>

<u-popup :show="remarkPup" @close="closeRemark" mode="bottom" :closeable="true">
	<view class="remarkBox">
		<view class="re_title">请选择订单备注（可多选）view>
		<view class="chooseBox">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px',height:'60rpx'}"
					v-for="(item, index) in checkboxList1" :key="index" :label="item.title"
					:name="item.title" activeColor="#54BC34">
				u-checkbox>
			u-checkbox-group>
		view>
		<view style="height: 100rpx;">view>
		<view class="confirmChoose" @click="confirmChoose">确定view>
	view>
u-popup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

data() {
	return {
		// 备注多选
		checkboxValue1: [],
		checkboxList1: [],
		remarkPup: false,
		remarkValue: ''
	}
},



methods: {
	// 备注多选
	openRemark() {
		this.remarkPup = true
	},
	checkboxChange(n) {
		console.log('change', n);
	},
	closeRemark() {
		this.remarkPup = false
	},
	getRemarks() {
		this.$common.request('post', '/order/getMemoLists').then((res) => {
			if (res.code == 1) {
				this.checkboxList1 = res.data
				this.checkboxList1.map((item) => {
					item.disabled = false
				})
				console.log(this.checkboxList1);
			}
		})
	},
	confirmChoose() {
		console.log(this.checkboxValue1);
		this.remarkValue = this.checkboxValue1.join()
		this.remarkPup = false
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// 备注
.garyColor {
	color: #B8B8B8;
}

.remarkBox {
	min-height: 20vh;
	position: relative;

	.re_title {
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		line-height: 100rpx;
	}

	.chooseBox {
		margin: 10rpx 4%;
	}

	.confirmChoose {
		position: absolute;
		bottom: 30rpx;
		left: 5%;
		width: 90%;
		border-radius: 50rpx;
		background-color: #54BC34;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		height: 80rpx;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

多选 vue3

<view class="tags">
	<checkbox-group @change="chooseTags">
		<label v-for="(item, index) in tagList" :key="item.value"
			:class="{'tagItem':true,'tagActive':item.checked}">
			<view class="checkboxHidden">
				<checkbox :value="item.value" :checked="item.checked" />
			view>
			<view>{{item.title}}view>
		label>
	checkbox-group>
view>


其余写法：	
tagList.value = res.data.check_type.map(item => {
	return {
		...item,
		checked: false
	};
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const tagList = ref([{
		value: '1',
		title: '自由的灵魂',
	},
	{
		value: '2',
		title: '孤僻'
	},
	{
		value: '3',
		title: '疯言疯语'
	},
	{
		value: '4',
		title: '风风火火的少年'
	}
])

const selectArr = ref([])//选中的多个标签

// 标签选择
function chooseTags(e) {
	const values = e.detail.value;
	tagList.value.forEach(item => {
		if (values.includes(item.value)) {
			item.checked = true;
		} else {
			item.checked = false;
		}
	});
	selectArr.value = values.sort().join(','); //将其排个序
	console.log(selectArr.value);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.tags {
	margin-top: 30rpx;

	.tagItem {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #7E7E7E;
		font-size: 26rpx;
		color: #3D3D3D;
		display: inline-block;
		padding: 9rpx 20rpx;
		margin-right: 20rpx;
		margin-bottom: 23rpx;
	}

	.tagActive {
		background: #FFF5FA;
		border: 1rpx solid #F364B3;
		color: #F364B3;
	}

	.checkboxHidden {
		display: none;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24