Question

There are 25 rows in a table. Each row has an attribute, an image(tick symbol) and 5 radio buttons rating the said attribute from 1-5. when one of the buttons is clicked, I want the image(tick symbol) which is previously hidden by css to be made visible.

The html is

         <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>

The images have been hidden through CSS. Javascript should identify which radio button is checked and then make visible the corresponding image.

Answer 1

You can do that like this:

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

When a radio is clicked, it will find the parent row of the one that is clicked, find the image in that row and show it. This assumes that the image is previously hidden with display: none.

For better long term maintenance, you should:

1. Put an ID on the table so this code can make sure and select only the desired table (not all tables in the document).
2. Put a class name on the image you want to show so it can be uniquely targeted and there is no risk of getting any other image that might be added to the table in the future.

Once, you had done these two steps, the code might look like this:

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

---

If you had to do it in plain javascript without a full selector engine, then I’d do it differently by manufacturing the id value of the image. Assuming you had put the “choices” id on the table, it would go something like this:

// 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");
    }    
});

And here’s a working example: http://jsfiddle.net/jfriend00/uMUem/