jquery checkbox issue - reload page fixes it

Question

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

there are syntax problems with your script tag

Dave L.
– Dave L.

2012-08-14 20:11:52 +00:00
Commented Aug 14, 2012 at 20:11 — Dave L.
– Dave L., Commented Aug 14, 2012 at 20:11
Hi. I have fixed that up but still no joy

Oli
– Oli

2012-08-14 20:19:28 +00:00
Commented Aug 14, 2012 at 20:19 — Oli
– Oli, Commented Aug 14, 2012 at 20:19

Claudio Redi · Accepted Answer · 2012-08-14 20:13:16Z

2

You need to place your logic inside a click or change event, otherwise you're just hiding / showing according the value that comes from the server.

Also change

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

By

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

And as other user remarked (not sure if it's a typo when pasting the code here), your jquery reference has syntax errors. Change it by this

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

answered Aug 14, 2012 at 20:13

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oli Over a year ago

I have fixed up what you suggested. I have actually tried this before but the text field only displays after a reload..

wanovak · Accepted Answer · 2012-08-14 20:15:18Z

1

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

answered Aug 14, 2012 at 20:15

wanovak

6,12727 silver badges32 bronze badges

1 Comment

Oli Over a year ago

This is the answer I followed. I have been banging my head against this, but it now works.. Thanks very much

Ram · Accepted Answer · 2012-08-14 20:21:05Z

1

Try the following:

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

edited Aug 14, 2012 at 20:21

answered Aug 14, 2012 at 20:15

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

Oli Over a year ago

Thanks - I managed to fix this by adding the $('#id_1').click(function(){

KingKongFrog · Accepted Answer · 2012-08-14 20:19:07Z

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>

answered Aug 14, 2012 at 20:19

KingKongFrog

14.5k22 gold badges78 silver badges135 bronze badges

1 Comment

Oli Over a year ago

instead of .change, I used .click. Maybe this would have worked too.

Collectives™ on Stack Overflow

jquery checkbox issue - reload page fixes it

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related