La selección múltiple (checkbox) o selección única (botón radial) para uno o más elementos de un conjunto.
Ya sea para una selección única o múltiple, existen dos alternativas de interfaz de
usuario que permiten seleccionar entre un grupo de opciones.
El checkbox o casilla de verificación, permite a los usuarios seleccionar o
deseleccionar opciones de forma sencilla y clara, utilizado para inputs de múltiples
opciones, lo que proporciona una representación visual del estado de cada opción: en
formularios, configuraciones de preferencias y otras situaciones donde se requiere una
elección binaria o múltiple.
Por otro lado el Botón Radial permite a los usuarios seleccionar una única opción de un
conjunto de opciones mutuamente excluyentes. Los botones radiales se presentan como
círculos pequeños con un indicador en forma de punto o marcador que se activa cuando se
selecciona una opción. Al hacer clic o tocar en un botón radial, se selecciona y
deselecciona automáticamente cualquier otra opción del mismo grupo.
Ambos tienen las siguiente funcionalidad:
<div class="radio-group">
<label class="checkbox-radio" for="checkbox-radio-toggle1">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt=""
width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt=""
width="32" height="32">
Opción 1
<input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle1"
name="grupo-radio-btn" value="1">
</label>
<label class="checkbox-radio" for="checkbox-radio-toggle2">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt=""
width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt=""
width="32" height="32">
Opción 2
<input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle2"
name="grupo-radio-btn" value="2">
</label>
<label class="checkbox-radio" for="checkbox-radio-toggle3">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt=""
width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt=""
width="32" height="32">
Opción 3
<input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle3"
name="grupo-radio-btn" value="3">
</label>
<label class="checkbox-radio" for="checkbox-radio-toggle4">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt=""
width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt=""
width="32" height="32">
Opción 4
<input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle4"
name="grupo-radio-btn" value="3">
</label>
</div>
.radio-group {
position: relative;
}
.radio-group .checkbox-radio,
.checkbox-group .checkbox {
font-family: 'Montserrat';
position: relative;
color: #024588;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
cursor: pointer;
width: 170px;
display: flex;
align-items: center;
padding: 9px 20px 9px 10px;
gap: 10px;
height: 50px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 0px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}
.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}
.check-box-activo {
background: #D7E5F4 !important;
}
input.input-checkbox-radio {
position: absolute;
opacity: 0;
cursor: pointer;
}
input.input-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-radio .radio-img-lleno,
.checkbox .checkbox-img-lleno {
display: none;
}
.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}
.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}
const elementos = document.querySelectorAll(".radio-group .checkbox-radio");
// Agregar un event listener a cada elemento
elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos.forEach((boton) => {
var imagen1 = boton.querySelector(".radio-img-vacio");
var imagen2 = boton.querySelector(".radio-img-lleno");
if (boton != elemento) {
boton.classList.remove("check-box-activo");
imagen1.classList.remove("esconder");
imagen2.classList.remove("mostrar");
}
});
var imagen1 = elemento.querySelector(".radio-img-vacio");
var imagen2 = elemento.querySelector(".radio-img-lleno");
imagen1.classList.add("esconder");
imagen2.classList.add("mostrar");
elemento.classList.add("check-box-activo");
});
});
<div class="checkbox-group pos-relative">
<label class="checkbox" for="checkbox-toggle1">
<img class="checkbox-img-vacio" src="iconos/checkbox_vacio_lineal.svg" alt=""
width="32" height="32">
<img class="checkbox-img-lleno" src="iconos/checkbox_ok_lineal.svg" alt=""
width="32" height="32">
Opción 1
<input type="checkbox" class="input-checkbox" id="checkbox-toggle1"
name="grupo-radio-btn" value="1">
</label>
<label class="checkbox" for="checkbox-toggle2">
<img class="checkbox-img-vacio" src="iconos/checkbox_vacio_lineal.svg" alt=""
width="32" height="32">
<img class="checkbox-img-lleno" src="iconos/checkbox_ok_lineal.svg" alt=""
width="32" height="32">
Opción 2
<input type="checkbox" class="input-checkbox" id="checkbox-toggle2"
name="grupo-radio-btn" value="2">
</label>
<label class="checkbox" for="checkbox-toggle3">
<img class="checkbox-img-vacio" src="iconos/checkbox_vacio_lineal.svg" alt=""
width="32" height="32">
<img class="checkbox-img-lleno" src="iconos/checkbox_ok_lineal.svg" alt=""
width="32" height="32">
Opción 3
<input type="checkbox" class="input-checkbox" id="checkbox-toggle3"
name="grupo-radio-btn" value="3">
</label>
</div>
.checkbox-group {
position: relative;
}
.radio-group .checkbox-radio,
.checkbox-group .checkbox {
font-family: 'Montserrat';
position: relative;
color: #024588;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
cursor: pointer;
width: 170px;
display: flex;
align-items: center;
padding: 9px 20px 9px 10px;
gap: 10px;
height: 50px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 0px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}
.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}
.check-box-activo {
background: #D7E5F4 !important;
}
input.input-checkbox-radio {
position: absolute;
opacity: 0;
cursor: pointer;
}
input.input-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-radio .radio-img-lleno,
.checkbox .checkbox-img-lleno {
display: none;
}
.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}
.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}
const checkbox = document.querySelectorAll(".checkbox-group .checkbox");
// Agregar un event listener a cada elemento
checkbox.forEach((elemento) => {
elemento.addEventListener("click", function (event) {
// console.log(elemento);
event.preventDefault();
var imagen1 = elemento.querySelector(".checkbox-img-vacio");
var imagen2 = elemento.querySelector(".checkbox-img-lleno");
if (elemento.classList.contains("check-box-activo")) {
imagen1.classList.remove("esconder");
imagen2.classList.remove("mostrar");
elemento.classList.toggle("check-box-activo");
} else {
elemento.classList.toggle("check-box-activo");
imagen1.classList.add("esconder");
imagen2.classList.add("mostrar");
}
});
});