javascript - 从单选中查找标签img并将其应用于单独的img src

原文 标签 javascript css forms

我正在寻找从JavaScript提取img src并将其应用于我在selected input下创建的单独div的img src.selected-radio

我希望img src.selected-radio匹配selection和初始的checked



#radios {
	display: flex;
	padding: 20px;
}
#radios label,
.selected-radio {
	display: block;
	height: 38px;
	width: 38px;
	cursor: pointer;
	position: relative;
}
#radios label + label {
	margin-left: 25px;
}
input[type="radio"] {
	opacity: 0;
	position: absolute;
}
input[type="radio"] + span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: #b3cefb;
	border-radius: 50%;
	padding: 5px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}
input[type="radio"]:checked + span {
	border: 2px solid #4285f4;
}

<div class="selected-radio"><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg">
</div>
<div class="container">
	<div id="radios">
		<label for="usa">
			<input type="radio" name="mode" id="usa" value="usa" checked/>
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg"><span>
		</label>
		<label for="canada">
			<input type="radio" name="mode" id="canada" value="canada" />
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg"><span>
		</label>
		<label for="uk">
			<input type="radio" name="mode" id="uk" value="uk" />
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg"><span>
		</label>
	</div>
</div>

最佳答案

您可以使用javascript执行此操作。

我添加了一个功能changeImg,并在img上放置了一些ID。

img的ID具有特定的形式,以“ img-”开头,并以相关的单选按钮的值结尾。



function changeImg(elm) {
  var val = elm.value;
  
  var img = document.getElementById('img-' + val);
  
  var src = img.src;
  
  var imgSelectedRadio = document.getElementById('img-selected-radio');
  
  imgSelectedRadio.src = src;
}

#radios {
	display: flex;
	padding: 20px;
}
#radios label,
.selected-radio {
	display: block;
	height: 38px;
	width: 38px;
	cursor: pointer;
	position: relative;
}
#radios label + label {
	margin-left: 25px;
}
input[type="radio"] {
	opacity: 0;
	position: absolute;
}
input[type="radio"] + span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: #b3cefb;
	border-radius: 50%;
	padding: 5px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}
input[type="radio"]:checked + span {
	border: 2px solid #4285f4;
}

<div class="selected-radio"><img id="img-selected-radio" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg">
</div>
<div class="container">
	<div id="radios">
		<label for="usa">
			<input type="radio" onchange="changeImg(this)" name="mode" id="usa" value="usa" checked/>
			<span><img id="img-usa" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg"><span>
		</label>
		<label for="canada">
			<input type="radio" onchange="changeImg(this)"  name="mode" id="canada" value="canada" />
			<span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg"><span>
		</label>
		<label for="uk">
			<input type="radio" onchange="changeImg(this)"  name="mode" id="uk" value="uk" />
			<span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg"><span>
		</label>
	</div>
</div>

关于javascript - 从单选中查找标签img并将其应用于单独的img src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49057923/

相关文章:

javascript - this.form无法在JavaScript函数中传递表单

javascript - 在jquery中取消提交?

javascript - 从成员函数访问函数成员变量

javascript - JS用if打开标签并在另一个标签中关闭它

javascript - 如何在jquery中进行一次函数调用

javascript - 如何创建特定的 X*X 尺寸表? (战舰游戏)(HTML、CSS、JS)

jquery - 在表格中水平显示单选按钮选项?

javascript - 重定向不起作用/提示不显示

android - ThemeRoller在设备上不起作用

vb.net:使用表单上的按钮打开另一个表单,不起作用