Question

我正在编写一个程序，当用户单击复选框时，输入的字体（我正在编写）会发生变化。首先，如果未选中复选框，则字体为“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，之前的数据应该在输入框中保持相同。

Answer 1

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

执行此操作

<强>更新添加此css

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

Answer 2

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

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

Here is the JSFiddle demo

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

2 个答案: