Imitating radiobutton behaviour with button in html

Question

I am trying to imitate radio button like behaviour with normal button for a quiz app. However my code works and highlight buttons with desired color permanently. But I want all other buttons in a Question to be white and only the selected one should take its desired color. What I am trying is here.

var count = 1;

function setColor(btn, color) {
  var property = document.getElementById(btn);
  if (count == 0) {
    property.style.backgroundColor = color;
    count = 1;
  } else {

    property.style.backgroundColor = color;
    count = 0;
  }
}

.button {
  border: 2px solid black;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 5vw;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  width: 100%;
}

.div1 {
  width: 95vw;
  border-radius: 20px;
  background-color: #ddd;
  padding: 30px;
  margin: 0 auto;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9);
  transition: 0.3s;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
}


/* Add some padding inside the card container */

.container {
  padding: 2px 16px;
}

h1 {
  font-size: 6vw;
}

input {
  width: 100%;
  height: 50px;
  font-size: 5vw;
}

select {
  width: 100%;
  height: 50px;
  font-size: 5vw;
}

label {
  width: 100%;
  height: 40px;
  font-size: 4vw;
}

<div class="card div1">
  <label for="Q1">Question 1 ?</label>
  <button id="button11" class="button" onclick="setColor('button11', 'red')">YES</button>
  <br>
  <button id="button12" class="button" onclick="setColor('button12', 'green')">NO</button>
  <br>
  <button id="button13" class="button" onclick="setColor('button13', 'blue')">N/A</button>
</div>
<br>
<div class="card div1">
  <label for="Q2">Question 2 ?</label>
  <button id="button21" class="button" onclick="setColor('button21', 'red')">YES</button>
  <br>
  <button id="button22" class="button" onclick="setColor('button22', 'green')">NO</button>
  <br>
  <button id="button23" class="button" onclick="setColor('button23', 'blue')">N/A</button>
</div>
<br>
<div class="card div1">
  <label for="Q3">Question 3 ?</label>
  <button id="button31" class="button" onclick="setColor('button31', 'red')">YES</button>
  <br>
  <button id="button32" class="button" onclick="setColor('button32', 'green')">NO</button>
  <br>
  <button id="button33" class="button" onclick="setColor('button33', 'blue')">N/A</button>
</div>

So far

Why not use radio buttons and style it as a button? Please see: https://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead — Roby Raju Oommen, Feb 13 '22 at 10:15
I see what you are trying to do. But still, you can do it with radio buttons and style it as normal button. And you can check selected radio button using javascript on change and change color. — Roby Raju Oommen, Feb 13 '22 at 11:09
I think Roby wanted to know is if there was a requirement that prevented you to style radiobuttons as buttons ? Also, keep in mind that styling radiobutton to look like buttons (instead of the other way) is **WAY** better in term of accessibility, and doesn't need JS. — Seblor, Feb 13 '22 at 11:10
I agree. I am now using radiobuttons. But I need three different colors for each button which I think is not possible without some JS. — Asif Hussain, Feb 13 '22 at 14:38

score 0 · Answer 1 · answered Feb 14 '22 at 15:29

I have achieved using radio buttons. See here:

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
    font-family:sans-serif;
}

#radioset {
    margin:4px;
   
    float:center;
    
  
}

#radioset label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    width:100%
       
}

#radioset label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
    
}

#radioset label input {
    position:absolute;
    top:-20px;
    visibility: hidden;
}

#radioset input:checked + span {
    background-color:red;
    color:#F7F7F7;
}

.button {
  /*background-color: #4CAF50;  Green */
  border: 2px solid black;
  /*color: white;*/
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 5vw;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  width: 100%;
}

.div1 {
  width: 95vw;
  
  border-radius: 20px;
  background-color: #ddd;
  padding: 10px;
  margin:0 auto;
  overflow:hidden;
}


.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}



input{
width: 100%;
height: 50px;
font-size: 5vw;
}


h1 {
    font-size:6vw;
}

</style>
</head>

<body>

<!-- QUESTIONS-- -->
<div class="div1 card">
<h1>Question 1 ?</h1>

<div id="radioset">

    <label><input type="radio" name="toggle"><span>YES</span></label><br>
    <label><input type="radio" name="toggle"><span>NO</span></label><br>
    <label><input type="radio" name="toggle"><span>N/A</span></label><br>
    
</div>
</div>


<br>
<div class="div1 card">
<h1>Question 2 ?</h1>

<div id="radioset">

    <label ><input type="radio" name="toggle2"><span>YES</span></label><br>
    <label ><input type="radio" name="toggle2"><span>NO</span></label><br>
    <label><input type="radio" name="toggle2"><span>N/A</span></label><br>
    
</div>
</div>

<br>
<div class="div1 card">
<h1>Question 3 ?</h1>

<div id="radioset">

    <label ><input type="radio" name="toggle3"><span>YES</span></label><br>
    <label ><input type="radio" name="toggle3"><span>NO</span></label><br>
    <label><input type="radio" name="toggle3"><span>N/A</span></label><br>
    
</div>
</div>


<p>___________________________________________________________________________________</p>

</body>
</html>

https://jsfiddle.net/mrgyk3zs/

Imitating radiobutton behaviour with button in html

1 Answers1