Input element style with jQuery

Change the style of input text box based on the selected check box

HTML

<input id ="bold" class='selector' type="checkbox" value="bold"/>&nbsp;<label for="bold">Bold</label><br/>
<input id="italic" class='selector' type="checkbox" value="italic"/>&nbsp;<label for="italic">Italic</label><br/>
<input id="underline" class='selector' type="checkbox" value="underline"/>&nbsp;<label for="underline">Underline</label><br/>
<br>
<input id="box" type="text" value="">
<br>

CSS

.bold {
 font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
    text-decoration: underline;
}

JavaScript

$(document).ready(function() {
    $('.selector').click(function() {
        var checked = $(this).is(':checked');
        var value = $(this).attr('value');
        if (checked) {
            $('#box').addClass(value);
        } else {
            $('#box').removeClass(value);
        }

    });

});