JQuery hide() and checkbox selecting

Question

I've got some strange behaviour happening I can't work out. I've written some code to add some functionality to a list containing labels and checkboxes. If the user has javascript enabled, I want the checkboxes to be hidden and for the labels to become clickable and change their appearance to indicate whether or not they have been selected. Here's the code:

$(".cal_checkbox").each(function(){
$(this).hide();
var id = $(this).attr('id');
if($(this).attr('checked'))
    {
    $('#cal_checkbox_'+id).css({"font-weight":"bold"}).css({'color':'#7C001D'}) // make bold and red if selected
    .click(function(){
        $(this).attr('checked', false)
    })
    }
else
    {
    $('#cal_checkbox_'+id).click(function(){
        $(this).attr('checked', true)
    })
    }});

This works fine if I comment out the hide() line ie if the checkboxes are visible you can still click on the labels and everything changes and works. However, if I leave the hide() in and the checkboxes become invisible, the whole thing stops working. I thought that hide() simply rendered the selected element in the same way as "display: none;". Does it remove the element completely?

Can you clarify 'stops working'? What changes, in terms of expected functionality? — Dancrumb
– Dancrumb, Commented Mar 2, 2010 at 17:57
I mean that clicking on the label does nothing. The checkboxes are hidden and if the checkbox was checked the css of the label is changed. — musoNic80
– musoNic80, Commented Mar 2, 2010 at 18:42

Rezler · Accepted Answer · 2010-03-02 23:22:02Z

1

In your click functions, the context of 'this' will be assigned to the "'#cal_checkbox_'+id" element (which I assume is meant to be the id of the label beside the checkbox?

hide() simply updates the display css propery to none. It does not remove the element from the DOM.

If you are using the HTML element for the checkbox labels, then this would probably explain why things are messing up when you hide the checkbox.

Can you post your HTML as well as the javascript?

answered Mar 2, 2010 at 23:22

Rezler

1,0741 gold badge8 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

JQuery hide() and checkbox selecting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related