Display a list only when a checkbox is checked

I'm having some trouble with HTML and Javascript (which I'm still new to). I use the Django Framework to display a list in a table case : for each element of my database, I display a list, and in this first list, a new list of corresponding elements in the database.

I made a JSFiddle.

The situation :

<tr>
               <td>Foo</td>
               <td>Fighters<td>
               <td>Bar</td>
               <td>Baz</td>
               <td>
                   <ul>                             
                         
                    </ul>
                </td>
</tr>

This is the Javascript that I tried, shamelessly stolen from a related question.

for (var i = 0; i < checkboxes.length; i++)
{
   var box = checkboxes[i];
    box.onclick = function() 
    {
        var currentList = this.parentNode;
        var secondColumn = currentRow.getElementsByTagName("ul")[1];

        alert("My text is: " + secondColumn.textContent );
    };
}

Now, I can display the two HTML lists without any trouble, it works fine. But I can't manage to get a checkbox that works. Hmm.