Javascript 选中复选框时如何自动填充文本区域

我试图在使用JavaScript选中复选框时自动填充我的文本区域

这是我目前的看法：

   .section
     .section_header Advanced Settings
     .panel.panel-primary
       .panel-body
           .form-group
             = f.check_box :hello, { label: "hello", checked: @user.hello }, '1', '0'

            = f.text_field :tag, value: @tag

如果选中复选框，我希望文本字段包含“hello”，如果不选中，则保留为空

---

我该怎么做呢？

您可以添加类似这样的内联JavaScript，但您可能希望将其解压缩到单独的文件中：

.section
  .section_header Advanced Settings
  .panel.panel-primary
    .panel-body
      .form-group
        = f.check_box :hello, { id: 'hello_cb', label: "hello", checked: @user.hello }, '1', '0'
        = f.text_field :tag, value: @tag, id: 'tag_field'

:javascript
  let checkbox = document.getElementById('hello_cb')
  let input = document.getElementById('tag_field')
  checkbox.onchange = function() {
    input.value = checkbox.checked ? 'hello' : ''
  }

我还向元素添加了ID以便于确定目标，但您可以在不接触原始HTML的情况下以不同的方式确定目标。

使用jQuery：

（考虑到您的复选框id是

hello

，而您的文本字段id是

tag

）

---

欢迎来到SO！你有一个问题的框架，但缺乏自己解决问题的证据。我们希望看到您尝试编写必要的JavaScript，或者至少告诉我们您在哪里对此进行了研究，并解释为什么这些页面没有帮助。目前，您似乎没有尝试并希望我们编写与本主题无关的代码。请参阅“”和“”及其所有链接页面。

$(document).ready(function(){
    $('#hello').change(function(){
        if(this.checked){
            $('#tag').val('hello');
        } else {
            $('#tag').val('');
        }
    });
});