jQuery addClass example

Change class name on click in jQuery

by agapetos

HTML

<div id="form">
  <p>Choose:</p>
  A: <input type="radio" name="choice" value="a" /><br>
  B: <input type="radio" name="choice" value="b" /><br>
  <button id="get_btn">Get choice</button>
  <button id="clear_btn">Clear choices</button>
</div>

<div id="results_wrapper">
<label>Choice: </label><span id="result"></span>
</div>

CSS

body {
  background: #20262E;
  padding: 10px;
  font-family: Helvetica;
}

#results_wrapper, #form {
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  font-size: 25px;
  text-align: left;
  transition: all 0.2s;
  width: 300px;
}
#results_wrapper {
  margin-top: 10px;
}
#form p {
  margin: 10px 0;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}

input[type="radio"] {
  width: 25px;
  height: 25px;
}

JavaScript

$('#get_btn').on("click", function() {
  $("#result").html($('[name="choice"]:checked').val());
});

$('#clear_btn').on('click', function() {
  //$('[name="choice"]').removeAttr('checked');
  $('[name="choice"]').attr('checked', false);
});