Javascript 仅在选中复选框时显示列表

我在HTML和Javascript方面遇到了一些问题（我还是新手）。我使用Django框架以表的形式显示列表：对于数据库的每个元素，我显示一个列表，在第一个列表中，显示数据库中相应元素的新列表

我发了一封信

情况：

<tr>
               <td>Foo</td>
               <td>Fighters<td>
               <td>Bar</td>
               <td>Baz</td>
               <td>
                   <ul>                             
                         {% for domain,terms in django_database %}
                               <li>
                               <input type="checkbox" class="listcheck"><label for="listcheck">  -  {{ domain }}</label>
                               <!-- When checkbox is checked, the following list displays -->
                                <ul>
                                   {% for object in database %}
                                       <li>{{ object }}</li>
                                   {% endfor %}
                                </ul>
                               </li>
                          {% endfor %}
                    </ul>
                </td>
</tr>

福
战士
酒吧
巴兹

{%用于域，django_数据库中的术语%}

-{{domain}}

{数据库%中对象的%s}
{{object}}
{%endfor%}


{%endfor%}

这是我尝试过的Javascript，不知羞耻地从一个相关问题中窃取

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

for（变量i=0；i

现在，我可以毫无困难地显示这两个HTML列表，它工作得很好。但我无法找到一个有效的复选框。嗯。

看看这个。这是一个带有fadeToggle的简单JS解决方案。延迟100是可选的，但它使洞的东西更优雅

<input class="collapsed" type="checkbox">The Checkbox
<div class="collapse2 collapse" style="display:none;">
   <li>hello there</li>
   <li>hello there</li>
   <li>hello there</li>
</div>

$(".collapsed").click(function(event){
    $(".collapse2").fadeToggle().delay(100);
})

复选框
你好
你好
你好
$（“.collapsed”）。单击（函数（事件）{
$（“.collapse2”）.fadeToggle（）.delay（100）；
})

---

如果不留下评论的话，那就可以了。

单击任何复选框都会显示所有详细信息；OP需要一种方法将复选框与一组详细信息链接起来，以便只展开相关的复选框。@DanielRoseman那么添加关键字

this

或

this.parent（）.closest（.collapse2”）

会有帮助吗？这是使用代码的JSFIDLE。我必须添加两件事。首先，丹尼尔在评论中说的是真的。当你有多个像这样的复选框时，JS可以一次打开错误的或所有的“div”。使用

this.parent（）。第二个问题是，您正在加载不必要的数据（我不知道您的查询有多大），而这些数据并不总是需要的。您可能希望使用Ajax，以便仅在单击复选框时加载数据。