ASPチェックボックスとJavaScriptを使用してテーブル行を折りたたむ

Question

私はASPとJavaScriptを使用しています。私は自分のページにテーブル、チェックボックス、テキストボックスフィールドを持っています。チェックボックスをオンにすると、最初のTextBoxを表示し、TextBox2とTextBox3のTable Rowsを折りたたみたいと思います。チェックボックスがチェックされていない場合は、テーブルの行を上に折りたたみたいと思います。これはどうすればできますか？

例については

：

これは私が試したものです：

<table> 
    <tr> 
     <td> 
      <asp:CheckBox ID="chkbxUS" runat="server" onchange="validate();" /> 
     </td> 
    </tr> 
    <tr id="ParentCountryInfo1"> 
     <td> 
      <asp:TextBox ID="TextBox1" runat="server">Checked Show Me</asp:TextBox> 
     </td> 
    </tr> 
    <tr id="ParentCountryInfo2"> 
     <td> 
      <asp:TextBox ID="TextBox2" runat="server">Un-Checked Show ME</asp:TextBox> 
     </td> 
    </tr> 
    <tr id="ParentCountryInfo3"> 
     <td> 
      <asp:TextBox ID="TextBox3" runat="server">Un-Checked Show ME</asp:TextBox> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Hello World 
     </td> 
    </tr> 
</table> 

<script type="text/javascript"> 
    function validate() { 
     if (document.getElementById('<%=chkbxUS.ClientID%>').checked) { 
      document.getElementById('ParentCountryInfo1').style.visibility = 'hidden'; 
      document.getElementById('ParentCountryInfo2').style.visibility = 'hidden'; 
      document.getElementById('ParentCountryInfo3').style.visibility = 'hidden'; 
     } else { 
      document.getElementById('ParentCountryInfo1').style.visibility = 'visible'; 
      document.getElementById('ParentCountryInfo2').style.visibility = 'visible'; 
      document.getElementById('ParentCountryInfo3').style.visibility = 'visible'; 
     } 
    } 
</script> 

Answer 1

私はあなたの問題を取得した場合、右、次のコードは、あなたの問題を解決する可能性があります。

<table> 
    <tr> 
    <td> 
     <asp:CheckBox ID="chkbxUS" runat="server" /> 
    </td> 
    </tr> 
    <tr id="ParentCountryInfo1"> 
     <td> 
     <asp:TextBox ID="TextBox1" runat="server">Checked Show Me</asp:TextBox> 
     </td> 
    </tr> 
    <tr id="ParentCountryInfo2"> 
     <td> 
     <asp:TextBox ID="TextBox2" runat="server">Un-Checked Show ME</asp:TextBox> 
     </td> 
    </tr> 
    <tr id="ParentCountryInfo3"> 
     <td> 
     <asp:TextBox ID="TextBox3" runat="server">Un-Checked Show ME</asp:TextBox> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Hello World 
     </td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#chkbxUS").change(function() { 

    if ($(this).is(":checked")) { 
     $("#TextBox1").show(); 
     $("#TextBox2").hide(); 
     $("#TextBox3").hide(); 
    } 
    else 
    { 
     $("#TextBox1").hide(); 
     $("#TextBox2").show(); 
     $("#TextBox3").show(); 
    } 
}); 


    }); 

これが役立ちます。