JSFiddle - React, Tailwind, and code Playground

by Mateus Fernandes de Mello

HTML

<div class="toggle-container">

	<div>
		<input name="name" id="in1" value="in1" type="radio"/>
		<label for="in1">
			<img width='35px' class="toggle-img toggle-black-white" src='http://imgur.com/PB6yDSZ.png' title="Ótimo" />
			<img width='35px' class="toggle-img toggle-colors" src='http://imgur.com/F6A4988.png' title="Ótimo" />
		</label>
	</div>

	<div>
		<input name="name" id="in2" value="in2" type="radio"/>
		<label for="in2">
			<img width='35px' class="toggle-img toggle-black-white" src='http://imgur.com/iJXfcvv.png' title="Bom" />
			<img width='35px' class="toggle-img toggle-colors" src='http://imgur.com/XPbC335.png' title="Bom" />
		</label>
	</div>

	<div>
		<input name="name" id="in3" value="in3" type="radio" checked='checked'/>
		<label for="in3">
			<img width='35px' class="toggle-img toggle-black-white" style="display: none;" src='http://imgur.com/pZV3rji.png' title="Normal" />
			<img width='35px' class="toggle-img toggle-colors" style="display: block;" src='http://imgur.com/9yyyvbw.png' title="Normal" />
		</label>
	</div>

	<div>
		<input name="name" id="in4" value="in4" type="radio"/>
		<label for="in4">
			<img width='35px' class="toggle-img toggle-black-white" src='http://imgur.com/zh1Gyek.png' title="Ruim" />
			<img width='35px' class="toggle-img toggle-colors" src='http://imgur.com/Ho2UgBk.png' title="Ruim" />
		</label>
	</div>

	<div>
		<input name="name" id="in5" value="in5" type="radio"/>
		<label for="in5">
			<img width='35px' class="toggle-img toggle-black-white" src='http://imgur.com/gNMkxpI.png' title="Péssimo" />
			<img width='35px' class="toggle-img toggle-colors" src='http://imgur.com/RJ8jrWH.png' title="Péssimo" />
		</label>
	</div>
</div>

CSS

.toggle-img { cursor: pointer; }

input[type=radio],
.toggle-img.toggle-colors { display: none; }

JavaScript

$(".toggle-img").on("click", function(){

	// Caso seja um icone selecionado (colorido) não faz nada e continua processando default
	if ($(this).is(".toggle-colors")) {
		return false;
	}

	// Reseta os icones (Exibe todos pretos e brancos e esconde coloridos)
	$(this)
		.closest(".toggle-container")
		.find(".toggle-img")
		.each(function(){

			if ($(this).is(".toggle-colors")) {
		
				$(this).css("display", "none");
		
			} else {

				$(this).css("display", "block");
			}
		});

	// Caso tenha clicado em um icone preto e branco altera para colorido (Efeito de selecionado)
	if ($(this).is(".toggle-black-white")) {
		
		$(this).css("display", "none");
		$(this).parent().find(".toggle-colors").css("display", "block");

	}
});