0

我在使用这个 jquery 时遇到了问题。当页面加载时，id_2 被隐藏。如果我选中复选框 id_1，则不会发生任何事情。但是，如果我重新加载页面，则会显示 id_2。

<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 正确显示/隐藏。我可以在萤火虫中看到，当我选中复选框时，选中的值会从真/假切换。

我究竟做错了什么？

奥利

4

4 回答 4

2

您需要将逻辑放在一个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-14T20:13:16.347 回答
1

尝试以下操作：

$(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-14T20:15:02.840 回答
1

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

如果您希望它是动态的，不需要重新加载页面，请添加一个事件处理程序（例如，单击）：

$('#id_1').click(function(){
    if ($('#id_1').is(':checked')){
         $('#id_2').show();
    } else {
         $('#id_2').hide();
    }
});
于 2012-08-14T20:15:18.927 回答
0 
<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>

​</p>

于 2012-08-14T20:19:07.597 回答