Question

我有一个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每个人。

Answer 1

我相信您将click事件绑定到textbox而不是checkbox。

此代码有效：

$(function() {
    $("#chk").click(function() {
        ToggleSection();
    });

    ToggleSection();
});

function ToggleSection() {    
    var $txt = $("#txt"); // Save textbox's reference
    // The right way to check if a checkbox is checked is with .prop method
    if ($("#chk").prop("checked")) {
        $txt.prop("disabled", false);
    }
    else {
        $txt.prop("disabled", true).val("");
    }
}

Test it here

在示例中，我启用/禁用该字段，以便您可以看到该值是清除的。 Here it is the code to show / hide：

var $chk;
$(function() {
    $("#checks :checkbox").each(function() {
        if ($(this).val() == "other")
            $chk = $(this);
    });
    $chk.click(function() {
        ToggleSection();
    });

    ToggleSection();
});

function ToggleSection() {    
    var $txt = $("#txt"); // Save textbox's reference
    // The right way to check if a checkbox is checked is with .prop method
    if ($chk.prop("checked")) {
        $txt.show();
    }
    else {
        alert("val: " + $txt.val());
        $txt.hide().val("");
        alert("val: " + $txt.val());
    }
}

Answer 2

使用以下代码修复

$(document).ready(function ()
{
    // Initially hide the 'Other' field row when page is loaded
    if ($("#MainContent_Browsers_5").is(":checked"))
    {
        $('#Step04OtherFieldDiv').show();
    }
    else
    {
        $('#Step04OtherFieldDiv').hide();
    }            

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

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

2 个答案: