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


   });

我希望这会有所帮助。