清除輸入字段時複選框未選中複選框列表

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 CheckBoxList的

<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("");似乎並不奏效。

此外，如果有更好的方式來寫上述我起到這一點，因爲我認爲這是一個小混亂，但我coudln't得到它的工作任何其他方式，因爲它是一個checkboxlist我可以添加個人身份證的每一個。

Answer 1

使用下面的代碼

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

Answer 2

我相信你將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()); 
    } 
}