如何使用 jquery 使文本加粗、斜体和下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7946196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make text bold,italic and underline using jquery
提问by coder
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="">
回答by dSquared
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/
在这里小提琴：http: //jsfiddle.net/tyfsf/
Hope it helps!
希望能帮助到你！
回答by WarFox
You can do that using simple CSS and a little jQuery code.
您可以使用简单的 CSS 和一些 jQuery 代码来做到这一点。
1.First define your cascading style sheet classes
1.首先定义你的级联样式表类
<style type="text/css">
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
text-decoration: underline;
}
</style>
2.Load jQuery
2.加载jQuery
<script type="text/javascript" src="jquery.js"></script>
3.Write the function for switching the classes
3.编写切换类的函数
<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
5.修改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/
jsfiddle 链接：http: //jsfiddle.net/deepumohanp/t2wKP/
