如何在我的文本区域中打印单选按钮并输入文字? [英] How to print my radio buttons and input type text in my textarea?

问题描述

我有一个带有四个单选按钮和一个输入文字的问卷.按顺序打印，而不会删除前一个.

I have questionnaire with four radio buttons and one input type text. Print in sequence without deleting the previous one.

var todos = $('input[type="radio"]');
  $(todos).on('click',() =>{
    var newText = '';
    Array.from(todos).forEach(
      function(element) {
        if(element.checked)
          newText+=element.value
      });
    $('#notem').val(newText);
  });

FUTBOL
<br>
SI<input type="radio" name="futbol" id="r1" value='SI PRATICARIA FUTBOL, '>
NO<input type="radio" name="futbol" id="r2" value='NO PRACTICARIA FUTBOL, '>
<br><br>
NATACION
<br>
SI<input type="radio" name="natacion" id="r3" value='SI PRATICARIA NATACION, '>
NO<input type="radio" name="natacion" id="r4" value='NO PRATICARIA NATACION, '>
<br><br>
CICLISMO
<br>
SI<input type="radio" name="ciclismo" id="r5" value='SI PRACTICARIA CICLISMO, '>
NO<input type="radio" name="ciclismo" id="r6" value='NO PRACTICARIA CICLISMO, '>
<br><br>
LE GUSTARIA PRATICAR OTRO DEPORTE
<br>
SI<input type="radio" name="otrod" id="r7" value='SI PRACTICARIA OTRO'>
NO<input type="radio" name="otrod" id="r8" value='NO PRACTICARIA OTRO'>
<br>
CUAL?
<br>
<input type="text" name="cual" id="" value=""><br><br>
<textarea id="notem" readonly style="width:170px; height:130px;"></textarea>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

推荐答案

您必须同时为单选按钮和文本字段绑定事件. 我认为下面的代码将对您有所帮助.

You have to bind event for both radio button and text field. I think below code will help you.

var todos = $('input[type="radio"]');
      $(todos).on('click',() =>{
        generateText();
      });
      
      
      $('#cual').keyup(function() {
        generateText();
      });
      
      function generateText () {
        var newText = '';
        Array.from(todos).forEach(
          function(element) {
            if(element.checked)
              newText+=element.value
          });
        $('#notem').val(newText +  '\n' + $('#cual').val());
      }

    FUTBOL
    <br>
    SI<input type="radio" name="futbol" id="r1" value='SI PRATICARIA FUTBOL, '>
    NO<input type="radio" name="futbol" id="r2" value='NO PRACTICARIA FUTBOL, '>
    <br><br>
    NATACION
    <br>
    SI<input type="radio" name="natacion" id="r3" value='SI PRATICARIA NATACION, '>
    NO<input type="radio" name="natacion" id="r4" value='NO PRATICARIA NATACION, '>
    <br><br>
    CICLISMO
    <br>
    SI<input type="radio" name="ciclismo" id="r5" value='SI PRACTICARIA CICLISMO, '>
    NO<input type="radio" name="ciclismo" id="r6" value='NO PRACTICARIA CICLISMO, '>
    <br><br>
    LE GUSTARIA PRATICAR OTRO DEPORTE
    <br>
    SI<input type="radio" name="otrod" id="r7" value='SI PRACTICARIA OTRO'>
    NO<input type="radio" name="otrod" id="r8" value='NO PRACTICARIA OTRO'>
    <br>
    CUAL?
    <br>
    <input type="text" name="cual" id="cual" value=""><br><br>
    <textarea id="notem" readonly style="width:170px; height:130px;"></textarea>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

如果有任何疑问，请随时告诉我.

Don't hesitate to let me know if you have any query.

这篇关于如何在我的文本区域中打印单选按钮并输入文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！