[英]Radio buttons and display none
我正在创建一个订单表单,当单击按钮时,它将在单独的div中显示图像。 该代码可成功用于复选框,但带有单选按钮不会隐藏以前单击的图像。
function displayImage(id) {
var el = document.getElementById(id);
if (el.style.display == "inline") {
el.style.display = "none";
} else {
el.style.display = "inline";
}
}
<tr>
<td>
<input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican');" />
<label for="chkcheese">Yellow American</label>
</td>
<td>
<input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack');" />
<label for="chkjack">Pepper Jack</label>
</td>
<td>
<input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz');"/>
<label for="chkmozz">Mozzarella</label>
</td>
</tr>
<div class="cheese">
<img id="imgamerican" src="images/american-cheese-slice.png" style="display:none"/>
<img id="imgcheddar" src="images/agedcheddar.png" style="display:none"/>
<img id="imgjack" src="images/pepperJack.png" style="display:none" />
<img id="imgswiss" src="images/swisscheese.png" style="display:none" />
单击事件仅在被单击的收音机上发生。
您需要迭代单选按钮,并确保取消选中的按钮隐藏了它们对应的图像,或者只需要迭代这些图像并隐藏它们,然后再显示单击其单选按钮的按钮。
function displayImage(id) {
var imgs = document.querySelectorAll(".cheese > img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
document.getElementById(id).style.display = "inline";
}
看来您的问题是,您希望在unchecked
单选按钮时触发click
事件。 但事实并非如此。 您需要专门更改最后显示的奶酪的显示,但是仅当单击单选按钮时才可以。
此解决方案有点像黑客,但在这种情况下应该可以使用:
JavaScript的:
var lastUnique;
function displayImage(id, unique) {
var el = document.getElementById(id);
if (unique) {
if (lastUnique) {
lastUnique.style.display = 'none';
}
lastUnique = el;
}
el.style.display = 'block';
}
单选按钮(注意添加的true
):
<tr>
<td><input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican', true);" />
<label for="chkcheese">Yellow American</label></td>
<td><input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack', true);" />
<label for="chkjack">Pepper Jack</label></td>
<td><input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz', true);" />
<label for="chkmozz">Mozzarella</label></td>
</tr>
因此,JavaScript会跟踪唯一参数为true的最后显示的元素,并在发生另一个unique == true
调用时将其隐藏。
在旁边:
您可能会研究事件处理在现代世界中是如何完成的。 这是做旧的方法,而且并非完全可管理。
另外,考虑研究模块化和封装技术。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.