Reliable javascript checkbox events

Tim Abell · May 18, 2011


Some sites have checkboxes which show/hide another element when you click them. This a handy feature, but not all sites take into account the fact that firefox remembers the contents of a form when you reload the page (this is a good thing).

So here’s how you avoid that with jQuery:

<script type="text/javascript">
    $(function() {
        // initialise show/hide to match the checkbox value
        $('.targetelements').toggle($('#mycheckbox').attr('checked'));
        // attach click handler for show/hide to checkbox
        $('#mycheckbox').click(function(){ $('.targetelements').toggle(this.checked);})
    });
</script>   

Simples!

You could use the same principle without jQuery if you need to. Simply read the value of the checkbox with javascript the old fashioned way before deciding whether to hide when you initialise you page.

Share: Tweet | LinkedIn
Suggest improvments: page source on github
If you liked this post then sign up to my mailing list: