Skip to content

Instantly share code, notes, and snippets.

@sabid

sabid/index.html

Last active May 14, 2023 03:21
Show Gist options
  • Save sabid/20e857b58af19cbbcb8c45386f44304c to your computer and use it in GitHub Desktop.
Save sabid/20e857b58af19cbbcb8c45386f44304c to your computer and use it in GitHub Desktop.
Download ZIP
checkbox validation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista</title>
</head>
<body>
<div class="product-details product-details--layout-sidebar-right product-details--description-side"
itemtype="http://schema.org/Product" itemscope="">
<div class="product-details__sidebar">
<meta itemprop="sku" content="1">
<div class="product-details__product-options details-product-options">
<div
class="product-details-module details-product-option details-product-option--radio details-product-option--Bebidas0028Elige-10029">
<div class="product-details-module__title ec-header-h6 details-product-option__title">
<div class="marker-required marker-required--medium"></div>Bebidas(Elige 1)
</div>
<div class="product-details-module__content">
<div
class="form-control--radio form-control form-control--flexible details-product-option--Naranja-agria">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="Naranja agria" id="form-control__radio--1017284947">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label for="form-control__radio--1017284947">Naranja
agria</label></div>
</div>
<div
class="form-control--radio form-control form-control--flexible details-product-option--Horchata">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="Horchata" id="form-control__radio---1638461870">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label
for="form-control__radio---1638461870">Horchata</label></div>
</div>
<div
class="form-control--radio form-control form-control--flexible details-product-option--Jamaica">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="Jamaica" id="form-control__radio--69743464">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label
for="form-control__radio--69743464">Jamaica</label></div>
</div>
<div
class="form-control--radio form-control form-control--flexible details-product-option--Pepsi">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="Pepsi" id="form-control__radio--1771097469">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label
for="form-control__radio--1771097469">Pepsi</label></div>
</div>
<div
class="form-control--radio form-control form-control--flexible details-product-option--Pepsi-light">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="Pepsi light" id="form-control__radio--1814840499">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label for="form-control__radio--1814840499">Pepsi
light</label></div>
</div>
<div
class="form-control--radio form-control form-control--flexible details-product-option--7-up">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="7 up" id="form-control__radio---1052057416">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label for="form-control__radio---1052057416">7
up</label></div>
</div>
<div
class="form-control--radio form-control form-control--flexible details-product-option--Te-frio">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="Te frio" id="form-control__radio--398408973">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label for="form-control__radio--398408973">Te
frio</label></div>
</div>
<div
class="form-control--radio form-control form-control--flexible details-product-option--Agua">
<div class="form-control__radio-wrap"><input class="form-control__radio" type="radio"
name="Bebidas(Elige 1)" value="Agua" id="form-control__radio---1051691290">
<div class="form-control__radio-view">
<div class="form-control__radio-view-inner"></div>
</div>
</div>
<div class="form-control__inline-label"><label
for="form-control__radio---1051691290">Agua</label></div>
</div>
</div>
</div>
<div
class="product-details-module details-product-option details-product-option--checkbox details-product-option--Complemento0028Elige-20029">
<div class="product-details-module__title ec-header-h6 details-product-option__title">
Complemento(Elige 2)</div>
<div class="product-details-module__content">
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Arroz-chino">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Arroz chino"
id="form-control__checkbox---1612212837">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---1612212837">Arroz chino</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Arroz-blanco">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Arroz blanco"
id="form-control__checkbox--1535835949">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--1535835949">Arroz blanco</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Frijoles">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Frijoles"
id="form-control__checkbox---43175250">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---43175250">Frijoles</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Verduras-salteadas">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Verduras salteadas"
id="form-control__checkbox--462336618">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--462336618">Verduras salteadas</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Pure-de-papas">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Pure de papas"
id="form-control__checkbox--826915748">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label for="form-control__checkbox--826915748">Pure
de papas</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Ensalada-de-repollo">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Ensalada de repollo"
id="form-control__checkbox--480084863">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--480084863">Ensalada de repollo</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Tostones">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Tostones"
id="form-control__checkbox--514350559">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--514350559">Tostones</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Yuca-frita">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Yuca frita"
id="form-control__checkbox--1655650970">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label for="form-control__checkbox--1655650970">Yuca
frita</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Papas-fritas">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Papas fritas"
id="form-control__checkbox--393628494">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label for="form-control__checkbox--393628494">Papas
fritas</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Platano-maduro">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Platano maduro"
id="form-control__checkbox---1494804219">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---1494804219">Platano maduro</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Tajadas-hawaianas">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Tajadas hawaianas"
id="form-control__checkbox--1039040833">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--1039040833">Tajadas hawaianas</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Ensalada-de-lechuga">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Ensalada de lechuga"
id="form-control__checkbox---562175757">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---562175757">Ensalada de lechuga</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Arroz-C002fFrijoles">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Complemento(Elige 2)" value="Arroz C/Frijoles"
id="form-control__checkbox---1841405522">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---1841405522">Arroz C/Frijoles</label></div>
</div>
</div>
</div>
<div
class="product-details-module details-product-option details-product-option--checkbox details-product-option--Toppings-2-oz0028Elige-20029">
<div class="product-details-module__title ec-header-h6 details-product-option__title">Toppings 2
oz(Elige 2)</div>
<div class="product-details-module__content">
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--escabeche">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="escabeche"
id="form-control__checkbox---1070530945">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---1070530945">escabeche</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Chile-coreano">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="Chile coreano"
id="form-control__checkbox---286297650">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---286297650">Chile coreano</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Encurtido">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="Encurtido"
id="form-control__checkbox--1397131813">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--1397131813">Encurtido</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--cebolla-amarilla">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="cebolla amarilla"
id="form-control__checkbox--1863530997">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--1863530997">cebolla amarilla</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--chimichurri">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="chimichurri"
id="form-control__checkbox---1773053881">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---1773053881">chimichurri</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--repollo-rojo">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="repollo rojo"
id="form-control__checkbox---635507081">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox---635507081">repollo rojo</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--mentiroso">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="mentiroso"
id="form-control__checkbox--448617906">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--448617906">mentiroso</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--repollo-amarillo">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="repollo amarillo"
id="form-control__checkbox--1556377720">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--1556377720">repollo amarillo</label></div>
</div>
<div
class="form-control--checkbox form-control form-control--flexible details-product-option--Zanahoria-rallada">
<div class="form-control__checkbox-wrap"><input class="form-control__checkbox"
type="checkbox" name="Toppings 2 oz(Elige 2)" value="Zanahoria rallada"
id="form-control__checkbox--68998630">
<div class="form-control__checkbox-view"><svg width="27" height="23" viewBox="0 0 27 23"
xmlns="http://www.w3.org/2000/svg">
<path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="3"
stroke-linecap="round"></path>
</svg></div>
</div>
<div class="form-control__inline-label"><label
for="form-control__checkbox--68998630">Zanahoria rallada</label></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script-2.js
document.addEventListener("DOMContentLoaded", function () {
let elements = [];
let options = document.getElementsByClassName('product-details-module details-product-option--checkbox');
/*
*
* Acceso a todos los complementos
*
*/
for (let index = 0; index < options.length; index++) {
//const element = array[index];
let Childrens = options[index].getElementsByTagName("input");
console.log({ 'element': Childrens });
const maxComplements = 2;
let complementsSelected = 0;
for (let indexChildren = 0; indexChildren < Childrens.length; indexChildren++) {
//console.log({ 'element Children': Childrens[indexChildren] });
Childrens[indexChildren].addEventListener('change', function() {
if (this.checked) {
if(complementsSelected >= 2)
{
this.checked = false;
return false;
}
complementsSelected++
console.log("Checkbox is checked.." + indexChildren);
} else {
console.log("Checkbox is not checked.." + indexChildren);
complementsSelected--
}
console.log("complementsSelected: " + complementsSelected);
});
}
}
})
Raw
script.js
<script>
document.addEventListener("DOMContentLoaded", function () {
[...document.getElementsByClassName('product-details-module details-product-option--checkbox')]
.forEach(el => {
// Do something with each element
let Childrens = el.getElementsByTagName("input");
console.log({ 'Childrens': Childrens });
const maxComplements = 2;
let complementsSelected = 0;
[...Childrens].forEach(checkbox => {
//console.log({ 'element Children': Childrens[indexChildren] });
checkbox.addEventListener('change', function() {
if (this.checked) {
if(complementsSelected >= maxComplements)
{
this.checked = false;
return false;
}
complementsSelected++
console.log("Checkbox is checked..");
} else {
console.log("Checkbox is not checked..");
complementsSelected--
}
console.log("complementsSelected: " + complementsSelected);
});
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment