jquery复选框问题 - 重新加载页面修复它

我遇到了这一点的jQuery的问题。当页面加载时，id_2被隐藏。如果我选中复选框id_1，则什么都不会发生。但是，如果我重新加载页面，则会显示id_2。jquery复选框问题 - 重新加载页面修复它

<head> 
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> /script> 
</head> 


<input id="id_1" type="checkbox" name="ck1"> 
<input type="text" id="id_2" name="tx1"> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      if ($('#id_1').is(':checked')) { 
       ($('#id_2').show()); 
      } else { 
       ($('#id_2').hide()); 
      } 
});

和

如果我使用一个按钮

$("#show_button").click(function()

它的工作原理 - ID_2显示/隐藏正确。我可以看到在萤火虫中，当我检查复选框时，选中的值从真/假切换。

我在做什么错？

奥利

来源

2012-08-14 Oli

有你'script'标签 – david 2012-08-14 20:11:52

嗨语法问题。我已经解决了，但仍然没有喜悦 – Oli 2012-08-14 20:19:28

那是因为你没有一个事件处理程序。您正在检查是否在页面加载时检查复选框，因此如果您检查并刷新页面，则浏览器会记住复选框已选中，因此事件在页面重新加载时触发（显示#id_2）

如果你希望它是动态的，没有必要的页面重载，添加事件处理程序（例如，点击）：

$('#id_1').click(function(){ 
    if ($('#id_1').is(':checked')){ 
     $('#id_2').show(); 
    } else { 
     $('#id_2').hide(); 
    } 
});

来源

2012-08-14 20:15:18 wanovak

这是我所遵循的答案。我一直在抨击我的头，但它现在可以工作..非常感谢 – Oli 2012-08-14 20:28:53

您需要将一个click或change事件中你的逻辑，否则你只是躲在/根据是来自服务器的值显示。

而且改变

if ($('#id_1').is('checked'))

通过

if ($('#id_1').is(':checked'))

与其他用户评论（不知道在这里粘贴代码的时候是一个错字），您的jQuery的参考有语法错误。本

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">

来源

2012-08-14 20:13:16

我已经解决了你的建议。我实际上已经尝试过这一点，但文本字段只显示后重新加载.. – Oli 2012-08-14 20:20:17

改变它尝试以下操作：

$(document).ready(function() { 
    $('#id_2').css('display', $('#id_1').is(':checked') ? 'block' : 'none'); 

    $('#id_1').change(function(){ 
     $('#id_2').css('display', this.checked ? 'block' : 'none') 
    }) 
});

来源

2012-08-14 20:15:02 undefined

谢谢 - 我设法解决这个通过添加$（'＃id_1'）。click（function（）{ – Oli 2012-08-14 20:29:24

<input id="id_1" type="checkbox" name="ck1"> 
<input type="text" id="id_2" name="tx1" style="display:none;"> 

<script> 
$('#id_1').change(function(){ 
    if ($('#id_1').is(':checked')) { 
     $('#id_2').show(); 
    } else { 
     $('#id_2').hide(); 
    } 
}); 
</script>

来源

2012-08-14 20:19:07 KingKongFrog

而不是.change，我用.click。也许这也会起作用。 – Oli 2012-08-14 20:29:59

jquery复选框问题 - 重新加载页面修复它

回答

相关问题