Question

enter image description here，一旦用户单击列表中的特定单选按钮，则必须隐藏整个单选按钮列表，并且必须在新的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中显示

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

Answer 1

尝试这样

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

这是一个干净的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>

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

如果您需要使用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>

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

4 个答案: