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

【问题标题】：Checkbox inserts text into textarea with Javascript复选框使用 Javascript 将文本插入文本区域
【发布时间】：2014-09-15 10:47:58
【问题描述】：

我正在尝试仅使用 Javascript（而不是 JQuery）来做一些非常简单的事情。基本上，我想使用一个复选框来切换文本区域中的文本。因此，如果未选中该复选框，我希望它在文本区域中说“你好”。如果复选框被选中，文本区域应该说“再见”。我刚刚开始使用 Javascript，所以任何帮助将不胜感激。谢谢

代码如下：

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

【问题讨论】：

HTML myonoffswitch & mytextarea 中的哪个标签？发布您的标记也会有所帮助。
感谢大家的回答。它们实际上都有效；我想在 Javascript 中有很多方法可以做到这一点。

标签： javascript html text checkbox textarea

【解决方案1】：

如果你的控件是一个表单，你可以做一些非常简单的事情，比如：

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

请注意，将 change 事件与复选框一起使用意味着在某些浏览器中，在复选框失去焦点之前不会调度事件，因此最好使用 click 事件。

【讨论】：

【解决方案2】：

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

我无法从您的代码 sn-p 判断您是否已将代码包装在 onload 函数中。如果您的 DOM 元素在您的 javascript 运行时未加载到 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/

【讨论】：

【解决方案3】：

我尝试了一些东西。这应该适合你

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;

【讨论】：

【解决方案4】：

只需尝试将代码中的 getElementsByTagName 替换为 getElementById 即可解决您的问题。

【讨论】：