Home/ Questions/Q 8388833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:33:27+00:00

I’m having problems with this bit of jquery. When the page loads, id_2 is

  • 0

I’m having problems with this bit of jquery. When the page loads, id_2 is hidden. If I check the check box id_1 nothing happens. However if I reload the page, id_2 then shows.

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

If I use a button and 

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

it works – id_2 shows/hides correctly. I can see in firebug that when I check the checkbox the checked value toggles from true / false.

What am I doing wrong?

Oli

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because you don’t have an event handler. You are checking to see if the checkbox is checked on page load, so if you check it and refresh the page, your browser remembers that the checkbox is checked, and thus the event is fired on page reload (showing #id_2)

    If you want it to be dynamic, with no page reload necessary, add an event handler (e.g., click):

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