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


   });

我希望这会有所帮助。

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

1 个答案: