在一个输入框中使用两种字体

时间:2016-01-28 06:08:02

标签: javascript php html fonts

我正在编写一个程序,当用户单击复选框时,输入的字体(我正在编写)会发生变化。首先,如果未选中复选框,则字体为“arial”字样。并且当选中复选框时,输入字体应变为“verdana”。

我能够这样做,但该功能会改变以前写入verdana的所有文字。

代码示例:

<input type= "checkbox" onchange = "tests();" name="remember" id = "remember"> **(Checkbox)**

function tests(){
        if (remember.checked == 1){
        $(.form-control).css('font-family','verdana');
    }else{
     $('.form-control').css('font-family','arial');
    }

    }

我需要每当我​​检查这个时,即将到来的数据应该是verdana,之前的数据应该在输入框中保持相同。

2 个答案:

答案 0 :(得分:0)

而不是更改整个表单类$(.form-control)的字体,而是针对特定的复选框类

执行此操作

<强>更新 添加此css

input[type=checkbox]:checked + label {
  font-family:'verdana'
} 
input[type=checkbox] + label {
  font-family:'arial'
}

答案 1 :(得分:-1)

在你的代码中,你似乎正在使用JQuery,所以你可以这样做:

$("#remember").change(function() {
  if ($(this).is(":checked")) {
    $(".myText").css("font-family", "Verdana");
  } else {
    $(".myText").css("font-family", "Arial");
  }
});

Here is the JSFiddle demo