JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="pollCont">
<div class="pollTitle">Shopping Survey</div>
<div class="pollTxt">Please answer the following questions.</div>
<div class="poll">

<form>

<div class="txt">Do you prefer to shop online or on the high street?</div>

<input type="radio" name="quest1" id="q1online" value="online" >
<label for="q1online">Online</label>

<input type="radio" name="quest1" id="q1high" value="highstreet">
<label for="q1high">Highstreet</label>

<input type="radio" name="quest1" id="q1both" value="both">
<label for="q1both">Both</label>

<div class="txt">If you had to choose between only being able to shop online or on the high street which would you choose?</div>

<input type="radio" name="quest2" id="q2online" value="online">
<label for="q2online">Online</label>

<input type="radio" name="quest2" id="q2high" value="highstreet">
<label for="q2high">Highstreet</label>

<div class="txt">Would you be sad to see shops disappear from the high street?</div>

<input type="radio" name="quest3" id="q3yes" value="yes">
<label for="q3yes">Yes</label>

<input type="radio" name="quest3" id="q3no" value="no">
<label for="q3no">No</label>

<input type="radio" name="quest3" id="q3unsure" value="unsure">
<label for="q3unsure">Unsure</label>

<div class="txt">Do you look at products in store and then buy online at a cheaper price?</div>

<input type="radio" name="quest4" id="q4yes" value="yes">
<label for="q4yes">Yes</label>

<input type="radio" name="quest4" id="q4no" value="no">
<label for="q4no">No</label>

<div class="txt">Would you stop buying from Amazon if it helped to save the high street?</div>

<input type="radio" name="quest5" id="q5yes" value="yes">
<label for="q5yes">Yes</label>

<input type="radio" name="quest5" id="q5no" value="no">
<label for="q5no">No</label>

<input type="radio" name="quest5" id="q5unsure" value="unsure">
<label for="q5unsure">Unsure</label>




<div class="txt">Please Comment: <span id="txt1">Why would you now vote differently?</span><span...

CSS

.pollCont {font-family:arial;border:solid #999;border-width:0 1px 1px 1px;max-width:460px;margin:auto;}
.pollTitle {background-color:#00468C;padding:10px;color:#fff;}
.pollTxt {padding:10px;line-height:24px;}
.poll {padding:10px;position:relative;}
.txt {font-weight:bold;margin:0 0 10px 0;color:#00468C;}
.poll input[type="radio"] {display:none;}
.poll label {display:inline-block;border:1px solid #999;padding:10px;margin:0 0 20px 0;}
.poll input[type="radio"]:checked + label {background-color:#BFDFFF;}

.txt {display:block;}

#txt1, #txt2, #txt3 {display:none;}

.poll textarea {width:100%;max-width:420px;min-height:120px;border:1px solid #999;display:block;}

.submit {padding:5px 30px;margin:10px 0 0 0;}

.thanks {text-align:center;margin:50px 0;}
.pc {position:absolute;background-color:#F0F8FF;max-width:400px;margin:5px 10px 0 5px;padding:10px;text-align:center;}
#pc {display:none;}

JavaScript

var quest1 = getA(quest1);
var quest2 = getA(quest2);
var quest3 = getA(quest3);
var quest4 = getA(quest4);


function getA(el) {

var radios = document.getElementsByName(el);

for (var i = 0, length = radios.length; i < length; i++)
{
 if (radios[i].checked)
 {
  // do whatever you want with the checked radio
return (radios[i].value);

  // only one radio can be logically checked, don't check the rest
  break;
 }
}

}