Question

我有多个输入字段作为单选按钮，用户可以在其中选择一个按钮，然后单选按钮消失，所选值将显示在新的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>

Answer 1

我考虑了为什么我们需要多种形式。 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);
}

请点击链接进行预览。

Answer 2

这样做：

    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>

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

2 个答案: