JSFiddle - React, Tailwind, and code Playground

by agapetos

HTML

<link rel="stylesheet" href="http://ghinda.net/css-toggle-switch/dist/toggle-switch.css">
<div class="switch-toggle switch-3 switch-candy">
  <input id="on" name="state-d" type="radio" value="1">
  <label for="on">Da</label>

  <input id="na" name="state-d" type="radio" value="" checked="checked">
  <label for="na">Da/Ne</label>

  <input id="off" name="state-d" type="radio" value="0">
  <label for="off">Ne</label>

  <a></a>
</div>

<h5>Rezultat:</h5>
<div class="result">
</div>

CSS

.switch-toggle {
  width: 200px;
}

.switch-toggle label {
  cursor: pointer;
}

h5 {
  margin-top: 20px;
  margin-bottom: 0;
}

.result {
  padding: 10px;
  height: 20px;
  border: 1px solid #555;
  width: 200px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

JavaScript

$('.switch-toggle').on('change', function() {
  $('.result').html($('[name="state-d"]:checked').val());
});