jQuery addClass example

Change class name on click in jQuery

HTML

<div class="container mt-3">
      <div class="row">
        <div class="col">
          <input  type="radio" id="a1" name="a" value="a1">
          <label  class="answer"for="a1">1</label>
        </div>
        <div class="col">
          <input class="answer" type="radio" id="a2" name="a" value="a2">
          <label for="a2">2</label>
        </div>
        <div class="col">
          <input class="answer" type="radio" id="a3" name="a" value="a3">
          <label for="a3">3</label>
        </div>
        <div class="col">
          <input class="answer" type="radio" id="a4" name="a" value="a4">
          <label for="a4">4</label>
        </div>
      </div>
    </div>

CSS

/* Radio */
input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
  height: 50px;
  width: 50px;
  background: white;
  border-radius: 10px;
  box-shadow: 2px 2px 0px black;
  font-size: 30px;
  color: black;
  margin: auto;
  text-align: center;
}

input[type="radio"]:checked + label {
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 10px;
  box-shadow: 2px 2px 0px black;
  font-size: 30px;
  color: black;
  margin: auto;
  text-align: center;
}

JavaScript

$('.answer').dblclick(function() {
	alert('dbclick');
});