使用ASP複選框和JavaScript摺疊表格行

Question

我正在使用ASP和JavaScript。我在我的頁面上有一個表格，複選框和文本框字段。當複選框被選中時，我想顯示第一個TextBox並摺疊TextBox2和TextBox3表格行。如果複選框未選中，我想向上摺疊表格行。如何才能做到這一點？

例如：

這是我的嘗試：

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


    }); 

我希望這有助於。