JavaScript如何点击复选框后改变表单里的字体

Question

<form name="form1" method="post" action="">
<INPUT id='font' maxLength=50 size=55 name=Subject value=如何变字体>
<input type="checkbox" name="deldd" value="yes" onclick="this.checked?document.getElementById('font').style.textDecoration ='line-through':document.getElementById('font').style.textDecoration ='none';"/>删除线
<input type="checkbox" name="cu" value="yes" onclick="this.checked?document.getElementById('font').style.fontWeight='bold':document.getElementById('font').style.fontWeight='normal';">粗体
<input type="checkbox" name="Down" value="yes" onclick="this.checked?document.getElementById('font').style.textDecoration ='underline':document.getElementById('font').style.textDecoration ='none';"/>下划线
</form>

Answer 1

再做一下判断
textDecoration ='line-through underline'

Answer 2

<form name="form1" method="post" action="">
<INPUT maxLength=50 size=55 name=Subject value=如何变字体><br>
<input type="checkbox" name="deldd" value="yes" onclick="ChangeFont(this)" />删除线
<input type="checkbox" name="cu" value="yes" onclick="ChangeFont(this)" >粗体
<input type="checkbox" name="Down" value="yes" onclick="ChangeFont(this)" />下划线
<input type="checkbox" name="wai" value="yes" onclick="ChangeFont(this)" />斜体
</form>
<script>
    function ChangeFont(obj){
        var txt = document.getElementById("Subject");
        switch(obj.name){
            case "Down":
                if(obj.checked)
                    txt.style.textDecoration = "underline ";
                else
                    txt.style.textDecoration = "";
                break;
            case "deldd":
                if(obj.checked)
                    txt.style.textDecoration = "line-through ";
                else
                    txt.style.textDecoration = "";
                break;
            case "wai":
                if(obj.checked)
                    txt.style.fontStyle = "italic";
                else
                    txt.style.fontStyle = "normal";
                break;
            case "cu":
                if(obj.checked)
                    txt.style.fontWeight = "bold";
                else
                    txt.style.fontWeight = "";
                break;
        }
    }
</script>

Answer 3

修改了一下，测试通过：
<form name="form1" method="post" action="">
<INPUT maxLength=50 size=55 name=Subject value=如何变字体><br>
<input type="checkbox" name="deldd" value="yes" onclick="ChangeFont(this)" />删除线
<input type="checkbox" name="cu" value="yes" onclick="ChangeFont(this)" >粗体
<input type="checkbox" name="Down" value="yes" onclick="ChangeFont(this)" />下划线
<input type="checkbox" name="wai" value="yes" onclick="ChangeFont(this)" />斜体
</form>
<script>
    function $(id){ 
        return (typeof(id)=="string")?document.getElementById(id):((typeof(id)=="object")?id:null); 
    }
    function ChangeFont(obj){
        var txt = document.getElementById("Subject");
        switch(obj.name){
            case "Down":
            case "deldd":
                if($("Down").checked && $("deldd").checked)
                    txt.style.textDecoration = "underline line-through ";
                else if($("Down").checked)
                    txt.style.textDecoration = "underline";
                else if($("deldd").checked)
                    txt.style.textDecoration = "line-through";
                else
                    txt.style.textDecoration = "";
                break;
            case "wai":
                if(obj.checked)
                    txt.style.fontStyle = "italic";
                else
                    txt.style.fontStyle = "normal";
                break;
            case "cu":
                if(obj.checked)
                    txt.style.fontWeight = "bold";
                else
                    txt.style.fontWeight = "";
                break;
        }
    }
</script>