遍历生成单选框,每个里面有图片
时间: 2024-05-05 21:19:55 浏览: 63
好的,我可以帮你解决这个问题。你可以使用HTML和CSS来创建单选框和图片。以下是一个示例代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选框和图片</title>
<style>
input[type="radio"] {
display: none;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 35px;
margin-right: 15px;
font-size: 20px;
line-height: 20px;
}
label:before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 50%;
}
label img {
vertical-align: middle;
max-height: 25px;
}
input[type="radio"]:checked + label:before {
content: "\2713";
text-align: center;
line-height: 25px;
color: #fff;
background-color: #337ab7;
}
</style>
</head>
<body>
<form>
<input type="radio" name="example" id="option1" value="option1">
<label for="option1"><img src="image1.jpg">选项1</label>
<input type="radio" name="example" id="option2" value="option2">
<label for="option2"><img src="image2.jpg">选项2</label>
<input type="radio" name="example" id="option3" value="option3">
<label for="option3"><img src="image3.jpg">选项3</label>
</form>
</body>
</html>
```
你可以将 `img` 标签中的 `src` 属性替换为你想要显示的图片路径。这个代码会创建一个包含三个选项的单选框,每个选项都包含一个图片和一个标签。当用户选择一个选项时,它的圆圈会变成一个勾号。希望这可以帮助你。
阅读全文