JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

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="">

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');
    }
});