javascript - 根据使用Javascript选择的单选按钮，使以前被CSS隐藏的图像可见

一张表有25行。每行有一个属性、一个图像（勾号符号）和5个单选按钮，将所述属性从1到5进行评级。当单击其中一个按钮时，我希望以前由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应该识别选中的单选按钮，然后使相应的图像可见。

最佳答案

你可以这样做：

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

单击收音机时，它将找到所单击收音机的父行，找到该行中的图像并将其显示出来。这假设图像以前是用display: none隐藏的。
为了更好地进行长期维护，您应该：
在表上输入一个ID，这样代码就可以确保只选择所需的表（而不是文档中的所有表）。
将类名放在要显示的图像上，这样它就可以成为唯一的目标，并且不存在将来可能添加到表中的任何其他图像的风险。
一旦完成了这两个步骤，代码可能如下所示：

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

如果必须在没有完整选择器引擎的情况下使用普通javascript，那么我将通过生成图像的I d值来进行不同的操作。假设您已将“choices”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/