选择后隐藏单选按钮并在新 div 中显示所选值答案

【问题标题】：once selected hide Radio buttons and display selected value in new div选择后隐藏单选按钮并在新 div 中显示所选值
【发布时间】：2019-05-09 09:28:47
【问题描述】：

enter image description here一旦用户单击列表中的特定单选按钮，则必须隐藏整个单选按钮列表，并且所选单选按钮值必须显示在新 div 中，类似于“尝试演示”按钮中所示“https://collect.chat/”网站右下角

<p class="chat-message">Which course you want to choose?
<label class="container">Course 1
<input type="radio" name="co1"value="course 1">
<span class="checkmark"></span></label>

<label class="container">Course 2
<input type="radio"  name="co2"value="course 2">
<span class="checkmark"></span></label>

<label class="container">Course 3
<input type="radio"  name="co3"value="course 3">
<span class="checkmark"></span></label>

<label class="container">Course 4
<input type="radio"  name="co4"value="course 4">
<span class="checkmark"></span></label> 

</p>

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

<script>
  document.mainForm.onclick = function()
  {
  var radVal = document.mainForm.rads.value;
  result.innerHTML = 'The course i want is'+radVal;
  }
 </script>

我希望单选按钮在选择后必须隐藏，并且选择的值必须显示在单独的 div 中

As show in the image the radio buttons disappear once they are selected

【问题讨论】：

标签： javascript jquery html radio-button

【解决方案1】：

这是一个干净的 jQuery 解决方案。您必须给单选按钮一个唯一的 ID 才能隐藏它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="chat-message" id="course-picker">Which course you want to choose?
<label class="container">Course 1
<input type="radio" name="co1"value="course 1">
<span class="checkmark"></span></label>

<label class="container">Course 2
<input type="radio"  name="co2"value="course 2">
<span class="checkmark"></span></label>

<label class="container">Course 3
<input type="radio"  name="co3"value="course 3">
<span class="checkmark"></span></label>

<label class="container">Course 4
<input type="radio"  name="co4"value="course 4">
<span class="checkmark"></span></label> 

</p>

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

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

【讨论】：

【解决方案2】：

这样试试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            function show(str){
                document.getElementById('sh2').style.display = 'none';
                document.getElementById('sh1').style.display = 'block';
            }
            function show2(sign){
                document.getElementById('sh2').style.display = 'block';
                document.getElementById('sh1').style.display = 'none';
            }
        </script>
    </head>

    <body>
        <p>
            <input type="radio" name="r1" id="e1" onchange="show2()"/>&nbsp;I Am New User&nbsp;&nbsp;&nbsp;
            <input type="radio" checked="checked" name="r1" onchange="show(this.value)"/>&nbsp;Existing Member
        </p>
        <div id="sh1">Hello There !!</div>
        <p>&nbsp;</p>
        <div id="sh2" style="display:none;">Hey Watz up !!</div>
    </body>
</html>

【讨论】：

感谢您的回答，但我希望单选按钮在选择后消失

【解决方案3】：

也许你可以这样尝试。

<p class="chat-message">Which course you want to choose?
<label class="container">Course 1
<input type="radio" name="co1"value="course 1">
<span class="checkmark"></span></label>

<label class="container">Course 2
<input type="radio"  name="co2"value="course 2">
<span class="checkmark"></span></label>

<label class="container">Course 3
<input type="radio"  name="co3"value="course 3">
<span class="checkmark"></span></label>

<label class="container">Course 4
<input type="radio"  name="co4"value="course 4">
<span class="checkmark"></span></label> 

</p>

<div class="chat self" style="display: none;"->
<p class="chat-message"><span id="result"></span></p>
</div>

<script>
  document.mainForm.onclick = function()
  {
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'The course i want is'+radVal;
    $(".chat-message").hide();
    $(".chat.self").show();
  }
</script>

【讨论】：

【解决方案4】：

如果您需要使用 vanilla JS 尝试此操作，则单击标签的单选选项值应附加到结果 div 并隐藏问题 div。

请检查下面的代码sn-p，希望对您有所帮助。

var course_radio = document.querySelectorAll("[type='radio']")

function handleSelection() {
    var question_text = this.closest(".chat-message").children[0].innerHTML;

    this.closest('.chat-message').style.display = "none"
    var question = document.createElement("p");
    var node = document.createTextNode(question_text);
    question.appendChild(node);

    var answer = document.createElement("p");
    var ans_node = document.createTextNode(this.value);
    answer.appendChild(ans_node);


    document.getElementById("result").appendChild(question);
    document.getElementById("result").appendChild(answer);
}

for (var i = 0; i < course_radio.length; i++) {
    course_radio[i].addEventListener('click', handleSelection);
}

<div class="chat-message">
    <p class="chat-question">Which course you want to choose?</p>
    <label class="container">Course 1
        <input type="radio" name="co1" value="course 1" class="course-checkbox">
        <span class="checkmark"></span></label>

    <label class="container">Course 2
        <input type="radio" name="co2" value="course 2" class="course-checkbox">
        <span class="checkmark"></span></label>

    <label class="container">Course 3
        <input type="radio" name="co3" value="course 3" class="course-checkbox">
        <span class="checkmark"></span></label>

    <label class="container">Course 4
        <input type="radio" name="co4" value="course 4" class="course-checkbox">
        <span class="checkmark"></span></label>

</div>

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

【讨论】：

谢谢，单选按钮正在消失。但我希望问题出现在“您要选择哪个课程”并且必须隐藏单选按钮。以及如何打开可以显示所选单选按钮的新 div（聊天自我）
@HasheemIshaq 已编辑我的答案以在结果 div 中填充问题及其选择的答案。已尝试保持代码冗长，但请继续，我相信您将能够进行进一步的更改以完成项目。万事如意