zhxf-app/pages/setting/messagePush/messagePush.vue

<template>
	<view class="padding-sm messagePush">

		<form action="">
			<checkbox-group class="block" @change="CheckboxChange">
				<view class="margin-top  ">
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
						<view class="title">火警报警</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[1].checked?'checked':''" :checked="checkbox[1].checked?true:false" value="B"></checkbox>
						<view class="title">火警故障</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false" value="C"></checkbox>
						<view class="title">水压越限</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[3].checked?'checked':''" :checked="checkbox[3].checked?true:false" value="D"></checkbox>
						<view class="title">开关变化</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[4].checked?'checked':''" :checked="checkbox[4].checked?true:false" value="E"></checkbox>
						<view class="title">设备离线</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[5].checked?'checked':''" :checked="checkbox[5].checked?true:false" value="F"></checkbox>
						<view class="title">烟感报警</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[6].checked?'checked':''" :checked="checkbox[6].checked?true:false" value="G"></checkbox>
						<view class="title">电气火灾</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[7].checked?'checked':''" :checked="checkbox[7].checked?true:false" value="H"></checkbox>
						<view class="title">视频报警</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[8].checked?'checked':''" :checked="checkbox[8].checked?true:false" value="I"></checkbox>
						<view class="title">电梯监测</view>
					</view>
					<view class="flex align-center checkItems">
						<checkbox class="blue" :class="checkbox[9].checked?'checked':''" :checked="checkbox[9].checked?true:false" value="J"></checkbox>
						<view class="title">井盖监测</view>
					</view>
				</view>

			</checkbox-group>



			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top">提 交 </button>
			</view>

		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkbox: [{
						value: 'A',
						checked: true
					},
					{
						value: 'B',
						checked: false
					},
					{
						value: 'C',
						checked: false
					},
					{
						value: 'D',
						checked: false
					},
					{
						value: 'E',
						checked: false
					},
					{
						value: 'F',
						checked: false
					},
					{
						value: 'G',
						checked: false
					},
					{
						value: 'H',
						checked: false
					},
					{
						value: 'I',
						checked: false
					},
					{
						value: 'J',
						checked: false
					}
				],

			}
		},
		methods: {
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.checkItems {
		width: 50%;
		display: inline-block;
		text-align: center;
		margin-bottom: 40rpx;

		.title {
			display: inline-block;
			margin-left: 10rpx;
		}
	}
	
</style>