Javascript show/hide current row.column

I am displaying my query result from a database in an HTML table . The table has many columns and one of them is a checkbox. Depending on the query result, the numbers of records vary. What I want to do is when a checkbox is checked , I want to be able to show a hidden a comment field (td) for that record.
The code below only toggles the td on the first row. Eventhough I click the checkbox on other rows beside the first row, the function only show/hide the
comment td for the first record.

My question is do I need to loop through the table and find out the current row where the checkbox checked? or how can I achieve this.
Any suggestion is greatly appreciated.

Thank you

I am calling this function on checkbox onclick

function togglevisibility(val, comment)
if (val.checked == true )

  {document.getElementById(comment).style.display = ''; }
   else {document.getElementById(comment).style.display = 'none';}


Are your element id’s unique? They must be unique identifiers if they are to work properly or at all.

yes they are unique

The script code you posted appears to do its job correctly, which implies that the problem is elsewhere.

Do you have a test page that we can look at, or failing that, HTML code showing how the script is being called, and what parts the script interacts with?

In this code I have 3 columns per row. The 2nd col is a checkbox. When you click a checkbox the 3rd column (comments) in that row is displayed. If you click the checkbox again the comments are hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="">
        <style type="text/css">
            .tdHidden {
                visibility: hidden
        <script type="text/javascript">
            function getNextSibling(elem) {
                var nextSib = elem.nextSibling;
                while (nextSib.nodeType !=1 ){
                    nextSib = nextSib.nextSibling;
                return nextSib;
            //assign an onclick even handler to the checkboxes
            window.onload=function() {
                var chkBoxes = document.getElementById('table1').getElementsByTagName('input');
                for(i=0; i < chkBoxes.length; i++) {
                    chkBoxes[i].onclick=function() {
                        var nextTd = getNextSibling(this.parentNode) ; //get the next td in this row
               = (this.checked)? 'visible' : '';

        <table id="table1" cellspacing="20">
                <td>row 1</td>
                <td><input type="checkbox" /></td>
                <td class="tdHidden">comment row 1</td>
                <td>row 2</td>
                <td><input type="checkbox" /></td>
                <td class="tdHidden">comment row 2</td>
                <td>row 3</td>
                <td><input type="checkbox" /></td>
                <td class="tdHidden">comment row 3</td>



Thank you so much , aidos. That really worked.
Happy New Year !!!

you’re welcome :slight_smile: and the same to you :Partier: