我正在寻找 JavaScript
这需要 img src
来自 selected input
并将其应用于 img src
我在 .selected-radio
下创建的一个单独的 div .
我想要 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
,并将一些 id 放在 img
上。
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 - 从radio selection中找到label img并应用到单独的img src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49057923/