1

我正在创建一个订单表单，当单击按钮时，它会在单独的 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" />
4

2 回答 2

1

点击事件只发生在被点击的收音机上。

您需要迭代单选按钮并确保取消选中的按钮隐藏了相应的图像，或者只是迭代图像并在显示单击单选按钮之前隐藏它们。

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";
}
于 2012-12-08T15:10:42.540 回答
0

看起来您的问题是click当单选按钮变为unchecked. 但事实并非如此。您需要专门更改最后显示的奶酪的显示，但仅当它是单击的单选按钮时。

这个解决方案有点像黑客，但它应该在这种情况下工作：

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 会跟踪显示的最后一个元素，唯一参数为真，并在另一个调用unique == true发生时隐藏它。

在旁边：

您可能会研究如何在现代世界中完成事件处理。这是做这件事的老方法，而且它不是完全可以管理的。

此外，考虑研究模块化和封装技术。

于 2012-12-08T15:16:34.177 回答