JSFiddle - React, Tailwind, and code Playground

by Leonardo Quintana

HTML

<checkbox id="check1" text="Checkbox dinamico con jquery"></checkbox>

<checkbox id="check2" text="Checkbox dinamico con jquery 2"></checkbox>
<hr>
<checkbox id="checkbox3"></checkbox>

SCSS

$cloud: #FFFFFF !default;
$dark: #444444 !default;
$black: #000 !default;
$light: hsla(0, 0, 96, 255) !default;
$primary: hsla(202, 100, 56, 255) !default;
$info: hsla(216, 71, 47, 255) !default;
$success: hsla(141, 71, 47, 255) !default;
$warning: hsla(47, 100, 61, 255) !default;
$danger: hsla(341, 100, 50, 255) !default;


$colores: (
	dark: $dark,
	black: $black,
	cloud: $cloud,
	light: $light,
	primary: $primary,
	info: $info,
	success: $success,
	warning: $warning,
	danger: $danger
);

//*********  Inicio Estilos check & radio Button  ***********
checkbox, radio {
	display: inline-flex;
	min-width: 1.5rem;
	height: 1.5rem;
	align-items: center;
	justify-content: center;

	input {
		display: none;
	}
	label {
		margin: 0;
	}
	span {
		 margin: 0 0.5em;
	}

	& > label::before {
		content: '';
		position: relative;
		margin-right: 0.5rem;
		background-color: transparent;
		display: inline-block;
		width: 1rem;
		height: 1rem;
		border: 1px solid $dark;
		border-radius: .2rem;
		cursor: pointer;
		transition: all .2s ease-out;
	}
	& :checked ~ label::before {
		background-color: $dark;
		box-shadow: inset 0 0 0 2px $cloud;
		border-radius: rem(2px);
	}
	&.is-check :checked ~ label::before {
		width: .5rem;
		transform: rotate(45deg) translate(-0.4rem, 0.25rem);
		transform-origin: bottom right;
		background-color: transparent !important;
		border-top: 0;
		border-left: 0;
		border-radius: 0;
	}
	&.is-filled :checked ~ label::before {
		box-shadow: none;
	}
	@each $class, $color in $colores {
		@if ($class == 'light') or ($class == 'cloud') or ($class == 'dark') or ($class == 'black') {} @else {
			&.is-#{$class} > label::before {
				border: 1px solid $color;
			}
			&.is-#{$class} :checked ~ label::before {
				box-shadow: inset 0 0 0 2px $cloud;
				background-color: $color;
			}
			// en estado checked cambia el color de borde y fondo
			&.is-check.is-#{$class} :checked ~ label::before {
				border-color:$color;
			}
		}
	}
}
radio > label::before,
radio...

JavaScript

$(document).ready(function() {
  $('checkbox').each(function(id) {
    var attr=$(this).attr('text');
    return $(this).append('<input type="checkbox" id="' + id + '" /><label for="' + id + '">' + ( attr ? attr : '') + '</label>');
  });
});