チェックボックスがチェックされているときにのみリストを表示する

Question

HTMLとJavascriptで何か問題があります（これはまだ新しくなっています）。私はDjangoフレームワークを使用してテーブルケースにリストを表示します。データベースの各要素について、リストを表示し、この最初のリストにデータベース内の対応する要素の新しいリストを表示します。

私はJSFiddleを作った。

状況：

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

これは臆面もなく、関連する質問から盗まれた、私が試したの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); 
    }; 
} 

ここで、2つのHTMLリストを問題なく表示できます。うまくいきます。しかし、私は動作するチェックボックスを取得することはできません。うーん。

Answer 1

この JS Fiddleをご覧ください。 fadeToggleを持つシンプルなJSソリューションです。 Delay of 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); 
}) 

これは、コメントを残さないとトリックを行う必要があります。