如何使用javascript在不同的文本字段中显示多个输入值答案

【问题标题】：How to show multiple input values in different text fields using javascript如何使用javascript在不同的文本字段中显示多个输入值
【发布时间】：2019-09-28 01:10:00
【问题描述】：

我有多个输入字段作为单选按钮，用户可以在其中选择一个按钮，然后单选按钮消失，所选值将显示在新的 div 中

如果选择并能够显示，我将成功获得单个值，但是如何从多个表单中获取输入并在单独的 div 中单独显示

<div class="chat machine">
    <p class="chat-message" id="course-picker">
        Which course do you want to choose?
        <form method="post">
            <!--Radio Buttons for getting course input -->
            <label class="container">
                <input type="radio" name="co1"value="course 1">
                <span class="checkmark">Course 1</span>
            </label>
            <label class="container">
                <input type="radio"  name="co2"value="course 2">
                <span class="checkmark">Course 2</span>
            </label>
            <label class="container">
                <input type="radio"  name="co3"value="course 3">
                <span class="checkmark">Course 3</span>
            </label>
            <label class="container">
                <input type="radio"  name="co4"value="course 4">
                <span class="checkmark">Course 4</span>
            </label>
        </form> 
    </p>
</div>
<div class="chat self" id="self-chat">
    <p class="chat-message"><span id="result"></span></p>
</div>

<script>
    jQuery(':radio').click(function () {
        $("#result").text(this.value);
        $("#course-picker").hide();
    });
</script>

<div class="chat machine">
    <p class="chat-message" id="preference">
        Which course do you want to choose?
        <form method="post">
            <!--Radio Buttons for getting course input -->
            <label class="container">
                <input type="radio" name="p1"value="prefer 1">
                <span class="checkmark">prefer 1</span>
            </label>
            <label class="container">
                <input type="radio"  name="p2"value="prefer 2">
                <span class="checkmark">prefer 2</span>
            </label>
        </form>
    </p>
</div>

<div class="chat self" id="self-chat">
    <p class="chat-message"><span id="result1"></span></p>
</div>

<script>
    jQuery(':radio').click(function () {
        $("#result1").text(this.value);
        $("#preference").hide();
    });
</script>

【问题讨论】：

您能进一步解释一下吗？您的代码中没有一个表单。此外，你可以考虑重构你的代码：使用 vanilla JS (document.mainForm.onclick)、jQuery 和 $ 看起来很混乱
请在问题中添加所有说明，而不是在评论部分。此外，进一步解释您所说的“表单”是什么意思——给定的标记中没有一个表单，我们无法猜出“使用不同的表单”是什么意思——是什么让你无法编写解决问题的代码？

标签： javascript jquery html angular-ui-bootstrap

【解决方案1】：

通过做：

    jQuery(':radio').click(function () {
        $("#result").text(this.value);
        $("#course-picker").hide();
    });

然后：

    jQuery(':radio').click(function () {
        $("#result1").text(this.value);
        $("#preference").hide();
    });

您将 2 个单击事件处理程序附加到所有单选按钮，无论其形式如何。

我刚刚修改了标记，为每个表单添加了不同的 ID（course-picker-form 和 preference-form）并更改了选择器（'#course-picker-form input[type="radio"]'和'#preference-form input[type="radio"]'）以将 2 个单独的点击处理程序附加到它们的预期单选按钮组：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat machine" id="course-picker">
    <p class="chat-message">
        Which course do you want to choose?
    </p>
    <form method="post" id="course-picker-form">
        <!--Radio Buttons for getting course input -->
        <label class="container">
          <input type="radio" name="co1"value="course 1" />
          <span class="checkmark">Course 1</span>
        </label>
        <label class="container">
            <input type="radio"  name="co2"value="course 2" />
            <span class="checkmark">Course 2</span>
        </label>
        <label class="container">
            <input type="radio"  name="co3"value="course 3" />
            <span class="checkmark">Course 3</span>
        </label>
        <label class="container">
            <input type="radio"  name="co4"value="course 4" />
            <span class="checkmark">Course 4</span>
        </label>
    </form> 
</div>
<div class="chat self" id="self-chat">
    <p class="chat-message"><span id="result"></span></p>
</div>

<script>
    jQuery('#course-picker-form input[type="radio"]').click(function () {
        $("#result").text(this.value);
        $("#course-picker").hide();
    });
</script>

<div class="chat machine" id="preference">
    <p class="chat-message">
        Which course do you want to choose?
    </p>
    <form method="post" id="preference-form">
        <!--Radio Buttons for getting course input -->
        <label class="container">
            <input type="radio" name="p1"value="prefer 1">
            <span class="checkmark">prefer 1</span>
        </label>
        <label class="container">
            <input type="radio"  name="p2"value="prefer 2">
            <span class="checkmark">prefer 2</span>
        </label>
    </form>
</div>

<div class="chat self" id="self-chat">
    <p class="chat-message"><span id="result1"></span></p>
</div>

<script>
    jQuery('#preference-form input[type="radio"]').click(function () {
        $("#result1").text(this.value);
        $("#preference").hide();
    });
</script>

【讨论】：

【解决方案2】：

我想过为什么我们需要多种形式。 https://codepen.io/kaslab/pen/vwGZWm

我已经添加了多个 P 标签 与类，问题添加无线电命名

HTML：

<div class="chat machine">
    <div class="user-photo">
        <img src="img/user.png" />
    </div>
    <form method="post" id="course-picker">
        <p class="chat-message questionControl">Which course do you want to choose?
            <!--Radio Buttons for getting course input --><br />
            <label class="container">
                <input type="radio" name="course1" value="course 1" />
                <span class="checkmark">Course 1</span>
            </label>
            <label class="container">
                <input type="radio" name="course1" value="course 2" />
                <span class="checkmark">Course 2</span>
            </label>
            <label class="container">
                <input type="radio" name="course1" value="course 3" />
                <span class="checkmark">Course 3</span>
            </label>
            <label class="container">
                <input type="radio" name="course1" value="course 4" />
                <span class="checkmark">Course 4</span>
            </label>
        </p>
        <p class="chat-message questionControl">Which subject do you want to choose?
            <!--Radio Buttons for getting subject input --><br />
            <label class="container">
                <input type="radio" name="subject1" value="subject 1" />
                <span class="checkmark">Subject 1</span>
            </label>
            <label class="container">
                <input type="radio" name="subject1" value="subject 2" />
                <span class="checkmark">Subject 2</span>
            </label>
            <label class="container">
                <input type="radio" name="subject1" value="subject 3" />
                <span class="checkmark">Subject 3</span>
            </label>
            <label class="container">
                <input type="radio" name="subject1" value="subject 4" />
                <span class="checkmark">Subject 4</span>
            </label>
        </p>
    <button type="button" class="getResult">Result</button>
    </form>
</div>
<div class="chat self" id="self-chat">
    <div class="user-photo">
        <img src="img/self.png">
        </div>
        <p class="chat-message">
            <span id="result"></span>
        </p>
    </div>
</div>

脚本：

var $radio = $("input:radio");
var $result = $(".getResult");

$result.on('change, click', function(){
  getSelectedRadioValue();
  hideRadio();
});

function getSelectedRadioValue(){
  var $result = [];
  $(".questionControl").each(function() {
    var $ans = $(this).find('input:radio:checked').val();
    $result.push($ans);
  });
  $('.chat-message #result').html($result.join(', '));
}

function hideRadio(){
  $('input:radio').hide();
  // if you wanted to disable
  // $('input:radio').attr('disabled', true);
}

请点击链接预览。

【讨论】：