Using Javascript, display an image that was previously hidden with CSS when a radio button is selected

Question

Using Javascript, display an image that was previously hidden with CSS when a radio button is selected

Within a table of 25 rows, each row contains an attribute accompanied by an image (represented by a tick symbol) and five radio buttons for rating the attribute from 1 to 5. Upon clicking one of the radio buttons, the hidden image (tick symbol) should become visible.

Here is the HTML code:


    <table>
        <tr>
            <td width="15px"><img id="1ai" src="../PNG Files/Untitled-3.gif" /></td>
            <td style="text-align: left" >Course Structure and its relevance</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 its 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 are hidden using CSS. JavaScript will need to determine which radio button is selected in order to reveal the corresponding image.

javascript jquery html css radio-button

Answer 1

Answer №1

If you want to achieve this effect, here is one way you can do it:

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

When a radio button is clicked, this script will locate the parent row of that specific radio button and display the image within that row. Please note that this assumes the image is initially hidden using CSS display: none.

To ensure easier maintenance in the long run, consider the following suggestions:

Assign an ID to the table to target only the intended table with this code, rather than all tables on the page.
Add a unique class name to the image you wish to reveal, so there's no confusion with any potential future images added to the table.

After implementing these improvements, your code could be refined as follows:

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

In the scenario where you need to achieve this functionality using plain JavaScript without relying on a selector engine, a different approach would be necessary by building the image ID dynamically. Provided the table has been assigned the "choices" ID, the process might look like this:

// cross-browser event binding
function addEvent(elem, evt, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(evt, fn, false);
    } else {
        elem.attachEvent("on" + evt, function() {
            return(fn.call(elem, window.event));   
        });
    }
}

addEvent(document.getElementById("choices"), "click", function(e) {
    var target = e.target || e.srcElement;
    if (target.tagName == "INPUT" && target.type == "radio") {
        var name = target.name;
        document.getElementById(name + "i").style.display = "inline";
        console.log("displaying image " + name + "i");
    }    
});

Check out a demo illustrating this technique: http://jsfiddle.net/jfriend00/uMUem/

Answer 2

If you want to achieve this effect, here is one way you can do it:

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

When a radio button is clicked, this script will locate the parent row of that specific radio button and display the image within that row. Please note that this assumes the image is initially hidden using CSS display: none.

To ensure easier maintenance in the long run, consider the following suggestions:

Assign an ID to the table to target only the intended table with this code, rather than all tables on the page.
Add a unique class name to the image you wish to reveal, so there's no confusion with any potential future images added to the table.

After implementing these improvements, your code could be refined as follows:

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

In the scenario where you need to achieve this functionality using plain JavaScript without relying on a selector engine, a different approach would be necessary by building the image ID dynamically. Provided the table has been assigned the "choices" ID, the process might look like this:

// cross-browser event binding
function addEvent(elem, evt, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(evt, fn, false);
    } else {
        elem.attachEvent("on" + evt, function() {
            return(fn.call(elem, window.event));   
        });
    }
}

addEvent(document.getElementById("choices"), "click", function(e) {
    var target = e.target || e.srcElement;
    if (target.tagName == "INPUT" && target.type == "radio") {
        var name = target.name;
        document.getElementById(name + "i").style.display = "inline";
        console.log("displaying image " + name + "i");
    }    
});

Check out a demo illustrating this technique: http://jsfiddle.net/jfriend00/uMUem/

Using Javascript, display an image that was previously hidden with CSS when a radio button is selected

Answer №1

Similar questions

Utilizing jQuery to display an element once JSON data is returned to the page

Implementing asynchronous file reading with module.exports in Node.js

What's the secret behind generating a crisp 400 on paper?

Trigger a JavaScript function just before navigating to the next page in the background

Modify the paragraph content upon clicking

View content from a text file on a webpage

two adjacent elements filling the entire height of the window at 100% dimensions

Is it possible for me to create a list in alphabetical order beginning with the letter B instead of A

I need to obtain the URL pathname on a server component in Next.js version 13 - how is this achieved

What methods can be used to accomplish this effect using CSS and/or Javascript?

Conceal a div element only if it is nested within a particular div class

Encountering a login issue with the jsonwebtoken code, specifically getting the error message "something went wrong logging in TypeError: Cannot read properties of undefined (reading 'sign')."

Is there a method to determine if localForage/indexedDb is currently handling data operations?

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Ways to transfer variables between JavaScript files using a deferred function

Find and replace string words containing special characters such as $ or !

Can you create different width sizes using two types in HTML?

Is it possible to use Node.js without resorting to template engines

Is there a way to preserve all the downloaded node modules in the package.json file?

Node receiving empty array as result after processing post request