После выбора скрыть переключатели и отобразить выбранное значение в новом разделе

Question

введите описание изображения здесь после того, как пользователь нажимает на определенную радиокнопку в списке, весь список радиокнопок должен скрываться, а выбранное значение радиокнопки должно отображаться в новом элементе div, что-то похожее на показанноев кнопке "try demo" на правой нижней странице веб-сайта "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

Как показано на рисунке, переключатели исчезают, когда они выбраны

Answer 1

Если вам нужно попробовать это с vanilla JS, по щелчку параметров радио значение метки должно быть добавлено к результатам div, а вопрос div должен быть скрыт.

проверьте приведенный ниже фрагмент кода, надеюсь, это поможет.

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>

Answer 2

Вот чистое решение jQuery.Вы должны дать радио-кнопкам уникальный идентификатор, чтобы скрыть его.

<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>

Answer 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>

Answer 4

Попробуйте вот так

<!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>