JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<!--[if lte IE 8]><div class="lte-ie8"><![endif]-->

<input type="radio" name="rd" id="choice1" value="1"> 
<label for="choice1" >Choice 1</label>

<input type="radio" name="rd" id="choice2" value="2">
<label for="choice2" >Choice 2</label>

<input type="radio" name="rd" id="choice3" value="3">
<label for="choice3" >Choice 3</label>

<!--[if lte IE 8]></div><![endif]-->

CSS

label { display : inline-block; 
        padding : 2px 5px;
        cursor  : pointer;
        border: 1px #b6b6b6 outset; }

input[type="radio"] { display: none; }
input[type="radio"].checked + label,
input[type="radio"]:checked + label { border: 1px #b6b6b6 inset; }

JavaScript

/* jquery fallback for IE<9 */

if ($('.lte-ie8').length) {
   
   var radioBtts = $('.lte-ie8').find('input[type="radio"]');
   radioBtts.on('click', function() {
      radioBtts.removeClass('checked');
      $(this).addClass('checked'); 
   });        
    
}