从复选框列表中取消选中复选框时清除输入字段

我有一个asp webform网站，一个页面checkboxlist有一个“其他”选项。当用户选中此复选框时，将textbox显示一个附加项。所有这些都工作正常，但是我遇到的问题是，如果用户取消选中该复选框，则不会清除它。

下面的代码显示了我所拥有的

$(function ()
{
    $("input[name='ctl00$MainContent$Step04OtherField']").click(function ()
    {
        ToggleSection();
    });

    ToggleSection();
});

function ToggleSection()
    {    
        if ($("#MainContent_Browsers_5").is(":checked"))
        {
            $("#Step04OtherFieldDiv").show();
            document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "visible";
            document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = true;
        }
        else
        {
            $("#Step04OtherFieldDiv").hide();
            $("#MainContent_Step04OtherField").val("");
            document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "hidden";
            document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = false;
        }
    }

清单清单的HTML

<div class="row">
    <div class="col-xs-offset-0 col-sm-offset-5 col-sm-2">
        <asp:CheckBoxList runat="server" id="Browsers" CssClass="CheckboxList">
            <asp:ListItem Text="All browsers" Value="All browsers"></asp:ListItem>
            <asp:ListItem Text="Internet explorer (IE)" Value="Internet explorer (IE)"></asp:ListItem>
            <asp:ListItem Text="Firefox (FF)" Value="Firefox (FF)"></asp:ListItem>
            <asp:ListItem Text="Chrome" Value="Chrome"></asp:ListItem>
            <asp:ListItem Text="Safari" Value="Safari"></asp:ListItem>
            <asp:ListItem Text="Other" Value="Other"></asp:ListItem>                
        </asp:CheckBoxList>
    </div>
</div>
<div class="row">
    <div class="col-xs-offset-0 col-sm-offset-4 col-sm-8">
        <asp:CustomValidator Display="Dynamic" runat="server" ID="custBrowserCheckboxselected" ForeColor="Red" ErrorMessage="Please select at least one browser for us to check the website on." ClientValidationFunction="BrowserCheckbox_ClientValidate" />
    </div>
</div>
<div class="form-group" id="Step04OtherFieldDiv">
    <asp:Label ID="Step04OtherFieldLabel" class="col-sm-4 control-label" runat="server" Text="Please specify *" AssociatedControlID="Step04OtherField"></asp:Label>
    <div class="col-sm-4">
        <asp:TextBox ID="Step04OtherField" runat="server" class="form-control" style="max-width: 100%" TextMode="MultiLine" Rows="5"></asp:TextBox>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep04OtherFieldErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step04OtherField" ErrorMessage="Please all browsers you would like the website checked on." />
    </div>
</div>

但$("#MainContent_Step04OtherField").val("");似乎并没有奏效。

另外，如果有更好的方法来编写上面的代码，那么我会这么做，因为我认为这有点混乱，但是我无法以其他任何方式使它工作，因为它是一个代码，checkboxlist我可以在每个代码中添加单独的ID。