JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<label id="trip_1_lb"><input type="radio" name="trip" id="trip_1" value="hokkaido" onclick="tripchoice()">北海道</label>
<label id="trip_2_lb"><input type="radio" name="trip" id="trip_2" value="okinawa"  onclick="tripchoice()">沖縄</label>
<label id="trip_3_lb"><input type="radio" name="trip" id="trip_3" value="tokyo"  onclick="tripchoice()">東京</label>

CSS

label {
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background-color: #ffffff;
}

JavaScript

function tripchoice() {
	var rdo_name = document.getElementsByName('trip') ;   
  for (var i=0; i < rdo_name.length; i++) {
  	var id = rdo_name.item(i).id;
  	if (rdo_name.item(i).checked) {
	    document.getElementById( id + "_lb").style.backgroundColor = '#CEF6F5';
 	    document.getElementById( id + "_lb").style.color = '#000000';
    } else {
    	document.getElementById( id + "_lb").style.backgroundColor = '#ffffff';
	    document.getElementById( id + "_lb").style.color = '#999999';
    }
  }
}