radio做选择题的单选功能

最新推荐文章于 2024-07-30 22:36:34 发布

寂寞々先生

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量1.8k

点赞数 1

分类专栏： CaseAnalysis 文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/qq_43036190/article/details/108962150

版权

CaseAnalysis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

radio做选择题的单选功能

前一段时间做了一个选择答题的一个功能，需求必须的是一个问题三个选项，还必须是单选，而且只能选择一个，在实现的过程中呢，踩了不少坑，今天呢给大家分享一下。

效果呢大概实这样的：

在这里插入图片描述

我当时写的时候尝试过很多的方法但是距离我想要的效果还是差那么一点点，功夫不负有心人中终于给我琢磨出来了，之前一直用的点击事件v-click 但是但是我这次换成了@change="selectAlBtnR" @change事件，并且在使用两个radio 分别给他们使用两个不同的v-model赋值，选中就是这个值，不选中就为空，好了，说多了都是废话，还是直接上代码吧！

样式 (style)

	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		html,
		body,
		#app {font-size: 0.4rem;}
		.header {
			width: 100%;
			height: 1rem;
			background: #fff;
			display: flex;
			border-bottom: 1px solid #EFF0F0;
			padding-left: 0.6em;
			z-index: 999;
			display: flex;
			align-items: center;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			overflow: scroll;
		}

		#app .header .header_left {
			width: 20%;
			display: inline-block;
			font-size: 0.3rem;
			display: flex;
		}

		.header_middle {
			width: 100%;
			height: 100%;
			margin-left: 2.2rem;
			line-height: 1rem;
		}

		.header_right {
			font-size: 1/32*26em;
			padding-right: 1.2em;
		}
		.main { margin-top: 1.3rem; }
		.cent { width: 100%; height: 0.9rem; }
		.radions {width: 0.4rem; height: 0.4rem; }
		.btn {
			width: 6rem;
			height: 1rem;
			background-color: blue;
			box-shadow: 1px 4px 24px 0px rgba(16, 132, 241, 0.3);
			border-radius: 45px;
			background: linear-gradient(90deg, #0C82F1 0%, #4CA8FC 100%);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 6rem;
		}
	</style>

body

<body>
	<div id="app">
		<div class="header">
			<!-- 左边 -->
			<div class="header_left">
				<p class="back">
					< </p>
						<p>返回</p>
			</div>
			<div class="header_middle">
				<p class="cent-size">商品列表</p>
			</div>
		</div>
		<div class="main">
			<ul>
				<li v-for="(item,index) in list" :key="index">
					<div class="head-title">
						<span>{{index+1}}.{{item.title}}</span>
					</div>
					<div class="mai-list" v-for="(v,i) in item.option">
						<label @change="selectAlBtnR" v-if="item.type == '1'">
							<input v-if="index==1" :name="v.id" class="radions" type="radio" :value="v.id"
								v-model="str" />
							<input v-else :name="v.id" class="radions" type="radio" :value="v.id" v-model="str2" />
						</label>
						<label v-else><input class="radions" @click="selectAlBtnC(v)" type="checkbox"></label>
						<span class="cent">{{v.zm}}</span>
						<span class="cent">{{v.optionName}}</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="btn" @click="saveInfo">
			<span>提 交</span>
		</div>
	</div>
</body>

script

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	(function (desingnWindth, n) {
		function getRem() {
			var html = document.getElementsByTagName('html')[0];
			var deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
			var rem = deviceWidth / desingnWindth * n;
			console.log(rem);
			html.style.fontSize = rem + 'px';
		}
		getRem();
		window.addEventListener('resize', function () {
			getRem();
		})
	})(750, 100);
</script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			list: [ // 这是我自己模拟的数据结构
				{
					type: "1",
					title: "吃饭了没有",
					option: [
						{
							id: "001",
							optionName: "吃了",
							isStatus: "2",
							zm: "A"
						},
						{
							id: "002",
							optionName: "没呢",
							isStatus: "2",
							zm: "B"
						},
						{
							id: "03",
							optionName: "等你请客嘞",
							isStatus: "2",
							zm: "C"
						}
					]
				},
				{
					type: "1",
					title: "你有女朋友吗？",
					option: [
						{
							id: "004",
							optionName: "有",
							isStatus: "2",
							zm: "A"
						},
						{
							id: "005",
							optionName: "没有",
							isStatus: "2",
							zm: "B"
						},
						{
							id: "06",
							optionName: "还是一只单生狗",
							isStatus: "2",
							zm: "C"
						}
					]
				}
			],
			listData: [],
			str: '', // 选中
			str2: ''// 未选中
		},
		created() {},
		methods: {
			selectAlBtnR(e) {
				console.log("选中的数据", e)
				this.listData = { id: this.str2, id2: this.str }
			}，
			// 提交
			saveInfo() {
				let data = {
					id: this.listData
				}
				console.log("提交以后的数据======>", data);
			}
		}
	})
</script>

寂寞々先生

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
radio做选择题的单选功能

radio做选择题的单选功能前一段时间做了一个选择答题的一个功能，需求必须的是一个问题三个选项，还必须是单选，而且只能选择一个，在实现的过程中呢，踩了不少坑，今天呢给大家分享一下。效果呢大概实这样的：我当时写的时候尝试过很多的方法但是距离我想要的效果还是差那么一点点，功夫不负有心人中终于给我琢磨出来了，之前一直用的点击事件v-click 但是但是我这次换成了@change="selectAlBtnR" @change事件，并且在使用两个radio 分别给他们使用两个不同的v-model赋值，选中就是
复制链接

扫一扫

专栏目录