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

Question

enter image description here once user clicks on a particular radio button in a list,then the entire radio buttons list must hide and the selected radio button value must be displayed in a new div, something like shown in "try demo" button in right bottom page of " https://collect.chat/ " website 一旦用户点击列表中的特定单选按钮，就输入图像描述，然后整个单选按钮列表必须隐藏，并且所选的单选按钮值必须显示在新的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>

I expect the radio buttons must hide once selected and selected value must display in a separate div 我希望单选按钮必须隐藏一次，所选值必须显示在单独的div中

As show in the image the radio buttons disappear once they are selected 如图所示，单选按钮一旦被选中就会消失

Answer 1

Try like this 试试这样吧

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

Answer 2

Here is a clean jQuery solution. 这是一个干净的jQuery解决方案。 You have to give the radio buttons a unique Id in order to hide it. 您必须为单选按钮指定一个唯一的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>

Answer 3

Maybe you can try like this. 也许你可以这样试试。

<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

If you need to try this with vanilla JS , on click of the radio options value of the label should be appended to results div and the question div should be hidden. 如果您需要使用vanilla JS尝试此操作，单击标签的单选项值应附加到结果div，并且应隐藏问题div。

please check the below code snippet, hope it helps. 请检查下面的代码片段，希望它有所帮助。

 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中显示所选值

问题描述

4 个解决方案

解决方案1
0 2019-05-09 09:31:45

解决方案2
0 已采纳 2019-05-09 09:37:56

解决方案3
0 2019-05-09 09:38:27

解决方案4
0 2019-05-09 09:59:41

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

问题描述

4 个解决方案

解决方案1 0 2019-05-09 09:31:45

解决方案2 0 已采纳 2019-05-09 09:37:56

解决方案3 0 2019-05-09 09:38:27

解决方案4 0 2019-05-09 09:59:41

解决方案1
0 2019-05-09 09:31:45

解决方案2
0 已采纳 2019-05-09 09:37:56

解决方案3
0 2019-05-09 09:38:27

解决方案4
0 2019-05-09 09:59:41