如何通过取消选中值来更改事件.. [英] How do I can change the event by uncheking the values..
本文介绍了如何通过取消选中值来更改事件..的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<html>
<head></head>
<body>
<table style="width:500px;height:400px;">
<tr>
<td>Font Family</td>
<td>
<select>
<option selected="selected">Select one.....</option>
<option>Calibri</option>
<option>Cambria</option>
<option>Verdana</option>
<option>Times New Roman</option>
</select>
</td>
</tr>
<tr>
<td>Font Size</td>
<td>
<a href="">Small</a>
<a href="">Normal</a>
<a href="Larger">Large</a>
</td>
</tr>
<tr>
<td>Font Style</td>
<td>
<input type="checkbox" onclick="applyStyle2()" id>Bold
<input type="checkbox" onclick="applyStyle()">Italic
<input type="checkbox" onclick="applyStyle3()">Underline
</td>
</tr>
<tr>
<td colspan="2">
<span id="spn">This is a paragraph</span>
<script type="text/javascript">
var x="";
function applyStyle(){
document.getElementById("spn").style.fontStyle="italic";
}
function applyStyle2(){
document.getElementById("spn").style.fontWeight="bold";
}
function applyStyle3(){
document.getElementById("spn").style.textDecoration="underline";
}
/*
function applyfontStyle(){
document.getElementById("span").style.fontStyle="italic";
}
*/
</script>
</td>
</tr>
</table>
</body>
</html>
推荐答案
而不是具有三种不同的功能你可以使用单一功能来做同样的事情，
HTML部分：
Hi,
Instead of having three different function you could use single function to do the same,
HTML part:
<input type="label" id="txtContent" value="RK"/>
<input id="chkbold" type="checkbox" onclick="applyStyle('b',this.id)">Bold
<input id="chkItalic" type="checkbox" onclick="applyStyle('i',this.id)">Italic
<input id="chkUnderline" type="checkbox" onclick="applyStyle('u',this.id)">Underline
Javascript函数：
Javascript function:
function applyStyle(styleOptn,chkbxID)
{
var e = document.getElementById(chkbxID);
var src= document.getElementById('txtContent');
src.style.fontWeight = (e.checked && styleOptn == 'b') ? "bold": "";
src.style.fontStyle = (e.checked && styleOptn == 'i') ? "italic": "";
src.style.textDecoration = (e.checked && styleOptn == 'u') ? "underline": "";
}
根据您的要求更新解决方案：
Updated solution as per your requirement:
<select id="selectFontFamily" onchange ="changeFontFamily();">
<option selected="selected">Select one.....</option>
<option>Calibri</option>
<option>Cambria</option>
<option>Verdana</option>
<option>Times New Roman</option>
</select>
Javascript函数：
Javascript function:
function changeFontFamily()
{
var e = document.getElementById("selectFontFamily");
var selectedValue = e.options[e.selectedIndex].value;
var src= document.getElementById('txtContent');
src.style.fontFamily = selectedValue;
}
干净又甜蜜;-)，你可以在这个网站上测试它http://jsbin.com/jotafaqu/5/ [ ^ ]
希望这对你有所帮助。
问候，
RK
Clean and sweet ;-), you could test it in this site http://jsbin.com/jotafaqu/5/[^]
Hope this helps you a bit.
Regards,
RK
<input type="checkbox" name="Bold" id="bld" onclick="applyStyle2()" ;Bold
<input type="checkbox" name="italic" id="itl" onclick="applyStyle()">Italic
<input type="checkbox" name="underline" id="ud" onclick="applyStyle3()">Underline
function applyStyle()
{
if(document.getElementById("itl").checked)
{
document.getElementById("spn").style.fontStyle="italic";
}
}
function applyStyle()
{
if(document.getElementById("bld").checked)
{
document.getElementById("spn").style.fontStyle="bold";
}
}
function applyStyle()
{
if(document.getElementById("ud").checked)
{
document.getElementById("spn").style.fontStyle="underline";
}
}
这篇关于如何通过取消选中值来更改事件..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
