switch pomocí custom radio buttonů

by Petr Haluza

HTML

<div class="formLayoutSwitch">
	<div><input type="radio" name="formLayout" id="formLayoutCompany" checked>
	<label for="formLayoutCompany"><span></span>Firma</label>
	</div>
	<div>
	<input type="radio" name="formLayout" id="formLayoutEnduser">
	<label for="formLayoutEnduser"><span></span>Soukromá osoba</label>
	</div>
</div>

<div id="switchable">
ahoj
</div>

CSS

.formLayoutSwitch { width:max-content; display:flex; gap: 10px} 
.formLayoutSwitch input  {position:absolute; opacity:0}
.formLayoutSwitch input:checked + label { color:  #0d6efd}
.formLayoutSwitch input:checked + label span { background-color: #0d6efd; border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");}
.formLayoutSwitch label { display:flex; gap: 5px; background: #f1f5fa; padding: 5px; border-radius:3px; cursor:pointer }
.formLayoutSwitch span { display:block; width:1em; height:1em; border: 1px solid lightblue; border-radius:.25em}

/* demo */
.layout-end-user {background:red}

JavaScript

// jen pro demo HAP
$(function () {
	$("#formLayoutCompany").click(function () {
  	$("#switchable").removeClass("layout-end-user");
  });
  $("#formLayoutEnduser").click(function () {
  	$("#switchable").addClass("layout-end-user");
  });
});