2011-05-20 157 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"。还有其他方法可以实现这一点,但这种方式对我来说一直效果不错。