2011-05-20 128 views
0

我被這個問題困住了。jQuery複選框選擇

我有一個文本框

<input id="chkIsHyperLink" type="checkbox" runat="server" /> 

而且一個<div>

<div ID="IsHyperLink" Visible="false" > 
    <tr> 
     <td> 
       <b>URL:</b> 
     </td> 
     <td> 
      <input type="text" id="txtUrl" name="URL" value="" runat="server" 
        class="text-input small-input" maxlength="100" /> 
     </td> 
     <td> 
     </td> 
    </tr> 
</div> 

而且使用jQuery的幫助下,我想輸出,如果用戶點擊一個checkbox然後textbox應該否則所示應該隱藏起來。

+5

你有沒有試過編寫任何代碼? – 2011-05-20 12:41:16

回答

2

我不明白你在做什麼。你想通過點擊來顯示/隱藏輸入嗎?

編輯:

這是ü想什麼?
演示: http://jsfiddle.net/hfpVc/11/

+0

謝謝..我的工作 – Bhoomi 2011-05-25 07:06:30

0

假設你有一個像這樣的地方一個複選框:

<input type="checkbox" id="show_textbox" /> 

$(document).ready(function() { 
    $('#show_textbox').bind('click', function() { 
    if($(this).is(":checked")) { 
     $("#txtUrl").show(); 
     } else { 
     $("#txtUrl").hide(); 
     } 
    }); 
}); 

HTH :)

0

您可以通過任一檢查複選框的狀態與事件處理程序或做讓複選框激發一個js方法onchange。

添加複選框

<input type="checkbox" name="checkbox" id="checkbox" onchange="checkBox();" /> 

和腳本

<script> 
function checkBox() { 
    if($('#checkbox').is(':checked')) { 
     $("#txtUrl").show(); 
    } else { 
     $("#txtUrl").hide(); 
    } 
} 
</script> 

有這樣做的更簡潔的方式,但這應該做的:)

如果你有興趣在事件處理的訣竅看看jquery中的bind api。

0

是這樣的嗎?

$(document).ready(function() { 
    $('#<%=myCheckBox.ClientID%>').bind('click', function() { 
    if($(this).is(":checked")) { 
     $("#<%=txtUrl.ClientID%>").show(); 
    } else { 
     $("#<%=txtUrl.ClientID%>").hide(); 
    } 
    }); 
}); 

請注意,我引用服務器端控件的屬性ClientID,因爲你的HTML元素在ASP.NET代碼設置爲runat="server"。還有其他方法可以實現這一點,但這種方式對我來說一直效果不錯。