Question

我遇到了这个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显示/隐藏正确。我可以在firebug中看到，当我选中复选框时，选中的值会从true / false切换。

我做错了什么？

奥利

Answer 1

您需要将逻辑置于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">

Answer 2

尝试以下方法：

$(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')
    })
});

Answer 3

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

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

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

Answer 4

<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>

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

4 个答案: