如何使输入的文本和复选框文本进入同一个文本字段？

Question

输入项目名称后，它会填充在与选中框文本相同的文本字段中，但位于字段顶部。

如果可能的话，我还想创建一个用于发送已完成表单的按钮

html

    <div class="name">
            <form>
                <label for="projectname">Project name:</label>
                <input type="text" id="pname" name="pname"><br>
                <br>
        </div>
                <br>
      <div class="series1"> 
        <tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/>
         Cabinets</tr>
         <input type="checkbox" rel="textbox1" name="Doors" />
         Doors
         <input type="checkbox" rel="textbox1" name="Drawers">
         Drawers
         <input type="checkbox" rel="textbox1" name="Drawer Fronts">
         Drawer Fronts
         <input type="checkbox" rel="textbox1" name="Handles">
         Handles
     </div>
    
     <textarea id="textbox1" ></textarea>

js

    $('input:checkbox').click(function(){
        var tb = "#"+$(this).attr('rel');
        let text_to_add = this.name + "\n";
        //when click a checkbox and show checked items in the text area
        if($(this).is(":checked")){
            $(tb).append(text_to_add);
        }else{
            let remove = this.name +"\n";
            //when a box is unchecked it clears the previously populated text from checkbox
            $(tb).text(function(i, text){
                return text .replace(text_to_add,'');
            });
        }
            
    })

Answer 1

我想出的解决方案是：每次更改文本区域值时存储文本区域中的现有值。

let existValue = ''
//inside the checkbox click function:
existValue = $(tb).val()

然后向输入添加一个事件侦听器，每次输入更改时将 e.target.value 添加到我们之前创建的存在值

$('#pname').on('input', (e)=>{
  
  $('#textbox1').val(`${e.target.value}\n${existValue}`)
})

这是一个工作示例：working example

如何使输入的文本和复选框文本进入同一个文本字段？

How can I make the entered text and checkbox text go to the same textfield?

javascript

jquery