Question

我遇到了这个问题。

我有一个文本框

<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，否则应隐藏它。

Answer 1

我不明白你想做什么。是否要通过单击显示/隐藏输入？

修改

这是你想要的吗？演示： http://jsfiddle.net/hfpVc/11/

Answer 2

假设你有一个像这样的复选框：

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

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

HTH：）

Answer 3

您可以通过使用事件处理程序检查复选框的状态，或者通过让复选框触发js方法onchange来执行此操作。

添加复选框

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

脚本

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

有更简洁的方法可以做到这一点，但这应该可以解决问题：）

如果您对eventhandler感兴趣，请查看jquery中的bind api。

Answer 4

这样的东西？

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

请注意，我引用了服务器端控件的ClientID属性，因为您的ASP.NET元素中的HTML元素设置为runat="server"。还有其他方法可以实现这一点，但这种方式对我来说一直很好。

jQuery Checkbox选择

4 个答案: