once selected hide Radio buttons and display selected value in new 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
<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
As show in the image the radio buttons disappear once they are selected
4 answers
solution1
0 2019-05-09 09:31:45
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()"/> I Am New User
<input type="radio" checked="checked" name="r1" onchange="show(this.value)"/> Existing Member
</p>
<div id="sh1">Hello There !!</div>
<p> </p>
<div id="sh2" style="display:none;">Hey Watz up !!</div>
</body>
</html>
solution2
0 ACCPTED 2019-05-09 09:37:56
Here is a clean jQuery solution. You have to give the radio buttons a unique Id in order to hide it.
<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>
solution3
0 2019-05-09 09:38:27
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>
solution4
0 2019-05-09 09:59:41
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
display the value of all selected radio buttons on a form
Show/Hide div based on combination of selected radio buttons
Hide div for Radio button selected value using jquery- Not working
Show/Hide Select Option for selected radio buttons
How to dynamically hide the radio buttons based on the previously selected radio buttons?
Hide a div on load with jquery if radio is not selected
Jquery show hide div if radio selected
Show and hide div based on selected radio input
show/hide div after selected radio button
Show/hide DIV based on selected with data-toggle=“buttons” input radio button bootstrap 3
Related Tags