How to make text bold,italic and underline using jquery

Question

I have three checkboxes and a textbox now If I write something in textbox and check the bold checkbox the text should appear with bold effect and similarly italic and underline without postback(i.e it should reflect immediately with the selected effect).

Here is my code:

Bold:<input type="checkbox" value=""/>
Italic:<input type="checkbox" value=""/>
Underline:<input type="checkbox" value=""/>

<input type="text" value="">

Answer 1

You can do the following:

<form>
    Bold:<input name="textStyle" type="checkbox" value="bold"/>
    Italic:<input name="textStyle" type="checkbox" value="italic"/>
    Underline:<input name="textStyle" type="checkbox" value="underline"/>

    <input name="styledText" type="text" value="">
</form>

<script type="text/javascript">
    $('input[name="textStyle"]').change(function(){
        if ($(this).val() == 'bold'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('font-weight', 'bold');
            else $('input[name="styledText"]').css('font-weight', 'normal');
        }
        else if ($(this).val() == 'italic'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('font-style', 'italic');
            else $('input[name="styledText"]').css('font-style', 'normal');
        }
        else if ($(this).val() == 'underline'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('text-decoration', 'underline');
            else $('input[name="styledText"]').css('text-decoration', 'none');
        }
    });
</script>

Fiddle here: http://jsfiddle.net/tyfsf/

Hope it helps!

Answer 2

You can do that using simple CSS and a little jQuery code.

1.First define your cascading style sheet classes

<style type="text/css">
.bold {
 font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
    text-decoration: underline;
}
</style>

2.Load jQuery

<script type="text/javascript" src="jquery.js"></script>

3.Write the function for switching the classes

<script type="text/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);
        }
    });     

});
</script>

5.Modified html

Bold:<input class='selector' type="checkbox" value="bold"/>
Italic:<input class='selector' type="checkbox" value="italic"/>
Underline:<input class='selector' type="checkbox" value="underline"/>
<br>
<input id="box" type="text" value="">
<br>

jsfiddle link: http://jsfiddle.net/deepumohanp/t2wKP/