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 は一意の引数が true である最後の要素を追跡し、別の呼び出しがunique == true発生したときにそれを非表示にします。

余談:

現代の世界でイベント処理がどのように行われているかを調べることができます。これは古い方法であり、正確には管理できません。

また、モジュール化とカプセル化の手法を検討することも検討してください。

于 2012-12-08T15:16:34.177 に答える