2016-06-23 11 views
0

Ich habe ein Webformular, mit ASP-Steuerelemente, mit ich möchte sehen, ob es überprüft wird, um weitere Informationen anzuzeigen (Checkbox1 ist so aktiviert -> div: yourDivClass show). aber meiner Seite nicht Es funktioniert hier ist mein Code:Webformular läuft nicht Skript

<%@ Page Title="Form" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Form.aspx.cs" Inherits="WebApplication1.Form" %> 
 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
.yourDivClass{ 
 
    display:none;} 
 
     </style> 
 
     <script language="text\javascript"> 
 
      $("#CheckBox1").change(function() { 
 
       if ($(this).attr('checked')) { 
 
        $(".yourDivClass").show(); 
 
       } 
 
      }); 
 
     </script> 
 
    </head> 
 
<body> 
 
    <asp:Panel ID="Panel1" runat="server"> 
 
     <table>    
 
      <tr> 
 
        <td >Do you have...?</td> 
 
       <td class="hiddenText"> 
 
        <asp:CheckBox ID="CheckBox1" runat="server" /> 
 
        </td> 
 
      </tr>   
 
     </table> 
 
     </asp:panel> 
 
<div class="yourDivClass">Im Your div</div>  
 
    <table> 
 
      <tr> 
 
       <td> 
 
        <asp:Button ID="Button1" runat="server" Text="Submit" ForeColor="#FF66FF" OnClick="Button1_Click" /> 
 
       </td> 
 
       <td> 
 
        <asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label> 
 
       </td> 
 
      </tr> 
 
    </table> 
 
</body> 
 
</html> 
 
</asp:Content>

irgendwelche Ideen bitte

+0

Irgendwelche Konsolenfehler/Protokolle? – evolutionxbox

+0

@evolutionxbox Ich sehe nichts in der Konsole, vielleicht schaue ich nicht an der richtigen Stelle, könnten Sie mir bitte weitere Informationen geben? – BKChedlia

+0

Google "Chrome Dev Tools Konsole", "IE Dev Tools Konsole" oder "Firefox Dev Tools Konsole" – evolutionxbox

Antwort

1

Da dies ein asp die ID CheckBox1 steuern zusätzliche Strings erhält. Für Client-Seite Manipulationen fügen Sie diese:

ClientIDMode="Static" 

auf Ihre asp Kontrolle.

Sie an diesem Beispiel sehen kann: jQuery Selector for server side control

oder Sie können versuchen, diese Wähler zu verwenden:

$("input[id$='_CheckBox1']") 

Blick auf dieses Beispiel, das funktioniert:

<ul runat="server" ClientIDMode="Static" id="DatesPickList" class="datesPickList"> 


$("#DatesPickList").css("background", "red"); 
+0

Ich muss ClientIDMode = "Static" für alle ASP-Steuerelemente setzen, wenn ich andere hinzufügen möchte? – BKChedlia

+0

Ich habe versucht, ClientIDMode .... nicht funktioniert, aber ich werde jetzt den Selektor versuchen, danke – BKChedlia

+0

funktioniert nicht !!! Ich denke, dass ich etwas fehlt – BKChedlia

0

Dies funktioniert :

<%@ Page Title="Form" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Form.aspx.cs" Inherits="WebApplication1.Form" %> 
 

 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
 
    
 
    <!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 

 
     <script type="text\javascript"> 
 
     
 
      <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
     <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
     <script> 
 
      function ShowPanel1() { 
 
       //Check if checkbox is checked or not 
 
       if ($('#CheckBox1').is(':checked')) { 
 
        //Show the Panel 
 
        $('#Panel2').show(); 
 
       } 
 
       else { 
 
        //Hide the Panel2 
 
        $('#Panel2').hide(); 
 
       } 
 
      } 
 

 

 
     </script> 
 

 
    </head> 
 
<body> 
 
    <asp:Panel ID="Panel1" runat="server"> 
 
     <table class="auto-style1"> 
 
     
 
      <tr> 
 
        <td class="auto-style3">Do you have ... ?</td> 
 
       <td class="hiddenText"> 
 
        <asp:CheckBox ClientIDMode="Static" ID="CheckBox1" runat="server" onchange="javascript:ShowPanel1()" /> 
 
        </td> 
 
      </tr> 
 
      <tr> 
 
       <td class="auto-style2"> </td> 
 
       <td class="auto-style4"> </td> 
 
       <td> </td> 
 
      </tr> 
 
      
 
     </table> 
 
     </asp:panel> 
 
    <div> 
 
     <br /> 
 
    </div> 
 
<asp:Panel ID="Panel2" runat="server" ClientIDMode="Static" Style="display: none">Test Panel</asp:Panel> 
 
     <div> 
 
     </div> 
 
    
 
    <p> 
 
      
 
    </p> 
 
    <table> 
 
      <tr> 
 
       <td class="auto-style2"> </td> 
 
       <td class="auto-style4"> 
 
        <asp:Button ID="Button1" runat="server" Text="Submit" ForeColor="#FF66FF" OnClick="Button1_Click" /> 
 
       </td> 
 
       <td> 
 
        <asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label> 
 
       </td> 
 
      </tr> 
 
    </table> 
 
</body> 
 
</html> 
 
</asp:Content>

+0

Ich bin froh, dass es für dich geklappt hat, viel Glück! –