Question

In this JSfiddle have I a checkbox, a label and a submit button.

When the checkbox is checked, and submit is clicked a ‘x’ should appear, like to does now.

When the checkbox is unchecked, and submit is clicked a ‘x’ should disappear, like to does now.

The problem is that the ‘x’ doesn’t appear again, if the checkbox is checked, and submit is clicked.

This is my code

$('form').submit(function() {
    if( $("input[type=checkbox]").is(':checked')){
        $("label").add();
    }else{   
        $("label").detach();
    }        
    return false;
});


<form action="" method="post">
<input id="element" signed" type="checkbox" checked>
<label for="element">x</label>
<button type="submit">Submit</button>
</form>

Any idea what’s wrong?

Answer 1

Well, if you use show() and hide() instead of add() and detach(), it works.

But I’m not certain if that approach addresses what you are trying to achieve.