使用 ASP 复选框和 JavaScript 折叠表格行答案

【问题标题】：Collapsing Table Row Using ASP Checkbox and JavaScript使用 ASP 复选框和 JavaScript 折叠表格行
【发布时间】：2017-10-20 04:37:34
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript c# html asp.net html-table

【解决方案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();
    }
});


   });

我希望这会有所帮助。

【讨论】：

谢谢你，奇拉格！这正是我想要的！