Как автоматически заполнить текстовую область, когда установлен флажок

Question

Я пытаюсь автоматически заполнить текстовую область, когда флажок установлен с помощью 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

Я хочу, чтобы текстовое поле содержало «привет», если флажок установлен, и оставьте его пустым, если оно не установлено.

Как бы я это сделал?

Answer 1

С jQuery:

(учитывая, что ваш идентификатор флажка hello, а ваш идентификатор текстового поля tag)

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

Answer 2

Вы можете добавить встроенный 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' : ''
  }

Я также добавил идентификаторы к элементам для упрощения таргетинга, но вы можете нацелить их по-другому, не касаясь оригинала HTML.