radio魔改checkbox样式

最新推荐文章于 2025-07-07 18:42:52 发布

玩代码的菜鸟

最新推荐文章于 2025-07-07 18:42:52 发布

阅读量223

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/junhian/article/details/145949927

最近做需求发现一张图看了下挖草，竟然还可以这样，鉴于我对技术要求得苛刻，这个可以试试

刚开始有点思路：可以魔改checkbox，但是一直可以多选后面懒得弄了，主要是要下班了

上代码（html)

<view class="item">
			<label class="item-name">命主性别:</label>
			<view class="value">
				<view class="container">
					<view class="radio-group">
						<label class="radio-label" @click="toggleRadio(1)">
							<radio class="custom-radio" :value="1" :checked="selectedOption === 1" />
							<view class="custom-radio-box" :class="{ 'checked': selectedOption === 1 }"></view>
							男
						</label>
						<label class="radio-label" @click="toggleRadio(2)">
							<radio class="custom-radio" :value="2" :checked="selectedOption === 2" />
							<view class="custom-radio-box" :class="{ 'checked': selectedOption === 2 }"></view>
							女
						</label>
					</view>
				</view>
			</view>
		</view>

JS部分

const selectedOption = ref(1); // 默认选中第一个选项

	const toggleRadio = (value) => {
		selectedOption.value = value;
//注：这个必须给后端需要的字段赋值
		sex.value = value
	};

CSS

.container {
	  display: flex;
	}
	
	.radio-group {
	  display: flex;
	  flex-direction: row;
	  align-items: flex-start;
	}
	
	.radio-label {
	  display: flex;
	  align-items: center;
	  position: relative;
	  cursor: pointer; 
	}
	
	.custom-radio {
	  display: none; 
	}
	
	.custom-radio-box {
	  width: 20px;
	  height: 20px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  margin-right: 10px;
	  position: relative;
	  transition: border-color 0.3s;
	}
	
	.custom-radio-box.checked {
	  border-color: #79171C;
	  background-color: #79171C;
	}
	
	.custom-radio-box.checked::after {
	  content: '√';
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  color: #fff;
	  font-size: 14px;
	  font-weight: bold;
	}

成品图：简直一模一样