复选框使用Javascript将文本插入文本区域

Checkbox inserts text into textarea with Javascript

本文关键字：文本 插入文本 区域 Javascript 复选框      更新时间：2023-09-26

我想做一些非常简单的只用Javascript(不是JQuery)。基本上，我想使用一个复选框来切换文本区域中的文本。如果复选框未选中，我希望它在文本区显示"Hello"如果复选框被选中，文本区域应该显示"再见"。我刚刚开始使用Javascript，所以任何帮助都会很感激。由于

代码如下:

var myswitch = document.getElementsByTagName("myonoffswitch");
var mytextarea= document.getElementsByTagName("mytextarea");
myswitch.onchange = function(){
      if(this.checked){
        mytextarea.value = "Hello"
      }else{
        mytextarea.value = "Goodbye"
    }
}

如果您的控件在一个表单中，您可以做一些非常简单的事情，如:

<form>
  <textarea name="ta"></textarea>
  <input type="checkbox" onclick="
    this.form.ta.value = this.checked? 'Hello':'Goodbye';
  ">
</form>

请注意，使用带有复选框的change事件意味着在某些浏览器中，直到复选框失去焦点才会调度事件，因此最好使用click事件

您应该使用document.getElementById而不是getElementsByTagName

我不能告诉你的代码片段，如果你把你的代码包装在一个onload函数。在javascript运行时，如果DOM元素没有加载到HTML中，则需要

这里有一个例子

window.onload = function () {
    var myswitch = document.getElementById("myonoffswitch");
    var mytextarea = document.getElementById("mytextarea");
    myswitch.onchange = function () {
        if (this.checked) {
            mytextarea.value = "Hello";
        } else {
            mytextarea.value = "Goodbye";
        }
    }
    //code here
}

这里有一个小提琴:http://jsfiddle.net/C4jVG/

我试过了。这应该对你有用

HTML 

<input type="checkbox" id="myonoffswitch">Switch</input>
<textarea id="mytextarea" cols="30" rows="10"></textarea>
Javascript 

function fillText() {
        var myswitch = document.getElementById("myonoffswitch");
        var mytextarea= document.getElementById("mytextarea");
        myswitch.onchange = function(){
            if(this.checked){
                mytextarea.value = "Hello"
            }else{
                mytextarea.value = "Goodbye"
            }
        }
    }
    window.onload = fillText;

尝试用getElementById替换代码中的getElementsByTagName，这将解决您的问题。

相关文章：