CSSで以前は非表示になっていたイメージを、JavaScriptを使用して選択したラジオボタンに基づいて表示します。

Question

テーブルには25行あります。各行は属性、画像（目盛り記号）、および前記属性を1-5から評価する5つのラジオボタンを有する。ボタンの1つがクリックされると、以前はcssによって隠されていた画像（目盛り記号）を目に見えるようにします。

htmlが

  <table> 

       <tr> 
        <td width="15px"><img id="1ai" src="../PNG Files/Untitled-3.gif" /></td> 
        <td style="text-align: left" >Course Structure and it's revelence</td> 
        <td width="6%"><input type="radio" name="1a" value="5" id="1a1" /></td> 
        <td width="6%"><input type="radio" name="1a" value="4" id="1a2" /></td> 
        <td width="6%"><input type="radio" name="1a" value="3" id="1a3" /></td> 
        <td width="6%"><input type="radio" name="1a" value="2" id="1a4" /></td> 
        <td width="6%"><input type="radio" name="1a" value="1" id="1a5" /></td> 
       </tr> 
       <tr bgcolor="#FCFFE8"> 
        <td width="15px"><img id="2ai" src="../PNG Files/Untitled-3.gif" /></td> 
        <td style="text-align: left" >Syllabus and it's coverage</td> 
        <td width="6%"><input type="radio" name="2a" value="5" id="2a1" /></td> 
        <td width="6%"><input type="radio" name="2a" value="4" id="2a2" /></td> 
        <td width="6%"><input type="radio" name="2a" value="3" id="2a3" /></td> 
        <td width="6%"><input type="radio" name="2a" value="2" id="2a4" /></td> 
        <td width="6%"><input type="radio" name="2a" value="1" id="2a5" /></td> 
       </tr> 
     </table> 

画像はCSSによって隠されています。 Javascriptは、どのラジオボタンがチェックされているかを識別し、対応するイメージを表示する必要があります。

Answer 1

あなたはこのようにそれを行うことができます。ラジオをクリックすると

$("table input[type='radio']").click(function() { 
    $(this).closest("tr").find("img").show(); 
}); 

、それは、クリックされた1の親行を見つけ、その行の画像を見つけて、それを表示します。これは、画像が以前にdisplay: noneで隠されていることを前提としています。優れた長期的なメンテナンスのため

、あなたがする必要があります

1. このコードを確認してくださいとだけ目的のテーブル（ドキュメント内のすべてではないテーブル）を選択することができるようにテーブルの上にIDを入れてください。
2. 表示する画像にクラス名を付けると、一意にターゲティングできるようになり、将来追加される可能性のある他の画像を取得する危険性はありません。

したら、あなたはこれらの2つのステップを行っていた、コードは次のようになります。

$("#choices input[type='radio']").click(function() { 
    $(this).closest("tr").find(".tick").show(); 
}); 

---

フルセレクタエンジンなしでプレーンなJavaScriptでそれをしなければならなかった場合は、その後、私は」イメージのid値を作成することによって、別の方法でそれを行います。あなたがテーブルの上に「選択肢」のIDを入れていたと仮定すると、それはこのような何か行くだろう：

// add event cross browser 
function addEvent(elem, event, fn) { 
    if (elem.addEventListener) { 
     elem.addEventListener(event, fn, false); 
    } else { 
     elem.attachEvent("on" + event, function() { 
      // set the this pointer same as addEventListener when fn is called 
      return(fn.call(elem, window.event)); 
     }); 
    } 
} 

addEvent(document.getElementById("choices"), "click", function(e) { 
    // use event bubbling to look at all radio clicks 
    // as they bubble up to the table object 
    var target = e.target || e.srcElement; 
    if (target.tagName == "INPUT" && target.type == "radio") { 
     // manufacture the right ID and make that image visible 
     var name = target.name; 
     document.getElementById(name + "i").style.display = "inline"; 
     console.log("show image " + name + "i"); 
    }  
}); 

をそして、ここで働く例です：http://jsfiddle.net/jfriend00/uMUem/