2016-06-23 180 views
0

我有一個web窗體,與asp控件,我想看看它是否檢查顯示更多的信息(複選框1被選中 - 「div:yourDivClass顯示)。但在我的網頁它不工作 這裏是我的代碼:webform沒有運行腳本

<%@ 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>

任何想法,請

+0

任何控制檯錯誤/日誌? – evolutionxbox

+0

@evolutionxbox我沒有看到控制檯中的任何東西,也許我沒有找到正確的地方,請給我進一步的信息? – BKChedlia

+0

谷歌「Chrome開發工具控制檯」,「IE開發工具控制檯」或「Firefox開發工具控制檯」 – evolutionxbox

回答

1

因爲這是一個ASP的控制CheckBox1的ID獲得額外的字符串。 對於客戶端的操作補充一點:

ClientIDMode="Static" 

到您的ASP的控制。

你可以看看下面這個例子: jQuery Selector for server side control

,或者你可以嘗試使用這個選擇:

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

看看這個例子的工作原理:

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


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

如果我想添加其他的控件,我需要爲所有的asp控件添加ClientIDMode =「Static」 – BKChedlia

+0

我試着ClientIDMode ....不工作,但我會嘗試現在的選擇器謝謝 – BKChedlia

+0

不工作!!!我認爲我錯過了somthing – BKChedlia

0

這是工作:

<%@ 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

我很高興它爲你工作,祝你好運! –