Как создать динамический Stepper (временную шкалу) в Js/jquery ⇐ CSS

[Anonymous]

Я ищу решение для создания динамического шагового двигателя. Во фрагменте, когда я выбираю Heudebouville, а затем feedbackDo, все флажки между ними должны быть отмечены, на данный момент это хорошо, но если я хочу снять один из флажков между (например: Babille) его следует отменить (checked=false без изменения имен классов), но здесь это не тот случай.
в примере ниже я установил первый флажок и еще один, флажки между ними отмечены (это хорошо), но когда я пытаюсь отменить их выбор (Опубликовать конкурс или Оставить отзыв), они все равно отмечены.
Нажмите здесь, чтобы увидеть Gif
Надеюсь, понятно. Вот мой код:

Код: Выделить всё

// Switch cites
$("#fluxLibreSwitchCity").click(function() {
var fromCity = $(".FluxLibreStep2__From .FluxLibreStep2__City");
var toCity = $(".FluxLibreStep2__To .FluxLibreStep2__City");

// Inverse  cities
var tempCity = fromCity.text();
fromCity.text(toCity.text());
toCity.text(tempCity);

// Inverse passages
var passages = $(".StepProgress > li");
var reversedPassages = passages.toArray().reverse();
$(".StepProgress").html(reversedPassages);
$(".StepProgress").toggleClass("inverse");
redrawSteps();
CalculatePrice();
});

// Road
// Calculate prices
const CalculatePrice = () => {
$('input[type="checkbox"]').change(function() {
var totalPrice = 0;
$('input[type="checkbox"]:checked').each(function() {
var price = parseFloat(
$(this).siblings("label").find(".infoORprice").text().trim()
);
totalPrice += price;
});
$("#totalPrice").text(totalPrice.toFixed(2) + " €");
});
};
CalculatePrice();

// order checkbox
var checkboxes = document.querySelectorAll(
'.StepProgress-item input[type="checkbox"]'
);

checkboxes.forEach((checkbox, index) => {
checkbox.addEventListener("change", function() {
redrawSteps();
});
});
const redrawSteps = () => {
const bluePath = document.querySelectorAll(".StepProgress-item");
bluePath.forEach((li) => li.classList.remove("is-active"));

const checked = document.querySelectorAll(
'.StepProgress-item input[type="checkbox"]:checked'
);

if (checked.length > 1) {
const first = checked[0].closest("li");
const last = checked[checked.length - 1].closest("li");
let started = false;
let finished = false;

bluePath.forEach((li) => {
if (li === first) {
started = true;
} else if (li === last) {
finished = true;
}

if (started && !finished) {
const checkbox = li.querySelector('input[type="checkbox"]');
li.classList.add("is-active");
if (checkbox && !li.classList.contains("subItem")) {
checkbox.checked = true;
}
}
});
}
var allItems = document.querySelectorAll(".StepProgress-item");
allItems.forEach(function(item) {
var checkbox = item.querySelector('input[type="checkbox"]');
if (checkbox &&  checkbox.checked) {
item.classList.add("selected");
} else {
item.classList.remove("selected");
}
});
};

Код: Выделить всё

.StepProgress {
position: relative;
display: flex;
flex-direction: column;
list-style: none;
width: 100%;
padding: 0;
}

.StepProgress:before {
display: inline-block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 10px;
height: calc(100% - 90px);
border-left: 4px solid gray;
transform: translateY(-50%);
z-index: 1;
}

.StepProgress__FromToCity {
display: flex !important;
align-items: center;
gap: 5px;
font-size: 14px;
color: gray;
margin-left: -6px !important;
margin-bottom: 5px !important;
}

.StepProgress__FromToCity:before {
content: "";
display: block;
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 7.5c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 1 1 12 0' stroke='%23787878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 9.75a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5' stroke='%23787878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
width: 18px;
height: 18px;
}

.StepProgress__FromToCity:last-child {
margin-top: -10px;
}

.StepProgress-item {
position: relative;
display: flex !important;
padding-bottom: 20px !important;
height: 100px;
}

.StepProgress-item input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid gray;
border-radius: 50%;
margin-right: 10px;
background-color: white;
position: relative;
top: 6px;
left: -8px;
z-index: 2;
}

.StepProgress-item input[type="checkbox"]:checked {
box-shadow: 0px 9px 17px -4px gray;
border: 2px solid blue;
}

.StepProgress-item input[type="checkbox"]:checked:before {
content: "";
background-color: blue;
}

.StepProgress-item input[type="checkbox"]:checked:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: #e0f8ff;
border-radius: 50px;
}

.StepProgress-item input[type="checkbox"]:before {
content: "";
display: block;
width: 10px;
height: 10px;
background-color: gray;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.StepProgress-item__subItemPassageNum {
display: contents;
}

.StepProgress-item__InfoPassage {
display: flex;
flex-direction: column;
flex: 1;
color: black;
font-size: 16px;
font-weight: 700;
margin-bottom: 0;
}

.StepProgress-item__InfoPassage span {
font-size: 14px;
font-weight: 400;
}

.StepProgress-item__InfoPassage .infoORprice {
color: gray;
}

.StepProgress-item__InfoPassage .icon {
position: absolute;
right: 0;
color: blue;
font-size: 14px;
font-weight: 600;
border-radius: 3px;
background-color: rgba(204, 204, 204, 0.6);
align-self: baseline;
padding: 2px 3px;
}

.StepProgress-item__InfoPassage .icon::before {
margin-right: 5px;
}

.StepProgress-item.selected>* {
z-index: 1;
}

.StepProgress-item.selected:after {
content: "";
background-color: #f4f4f499;
height: calc(100% - 10px);
width: calc(100% + 10px);
position: absolute;
top: calc(50% - 10px);
transform: translateY(-50%);
left: 0;
z-index: 0;
}

.StepProgress-item.subItem {
margin-left: 40px;
}

.StepProgress-item.subItem.selected>* {
z-index: 1;
}

.StepProgress-item.subItem.selected:after {
content: "";
left: -40px;
width: calc(100% + 50px);
}

.StepProgress-item.subItem input[type="checkbox"]:checked {
box-shadow: 0px 9px 17px -4px gray;
}

.StepProgress-item.subItem input[type="checkbox"]:checked+.StepProgress-item__InfoPassage:before {
background-color: blue;
left: -67px;
width: 30px;
}

.StepProgress-item.subItem .StepProgress-item__InfoPassage {
position:  relative;
}

.StepProgress-item.subItem .StepProgress-item__InfoPassage:before {
content: "";
display: inline-block;
position: absolute;
left: -70px;
top: 16px;
width: 34px;
height: 4px;
transform: translateY(-50%);
background-color: gray0;
z-index: 1;
}

.StepProgress-item.subItem.is-active {
position: relative;
}

.StepProgress-item.subItem.is-active:before {
content: "";
left: -40px;
top: 14px;
height: 100%;
}

.StepProgress-item.not-active * {
color: #787878;
}

.StepProgress-item.not-active input[type="checkbox"]::before {
width: 100%;
height: 100%;
}

.StepProgress-item.not-active .StepProgress-item__InfoPassage+span {
background-color: #f4f4f4;
}

.StepProgress-item:last-of-type {
padding-bottom: 0;
}

.StepProgress-item.is-active:before {
display: inline-block;
content: "";
position: absolute;
top: 26px;
height: calc(100% - 8px);
width: 4px;
background: blue;
z-index:  2 ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; s c r i p t   s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / j q u e r y / 3 . 7 . 1 / j q u e r y . m i n . j s " & g t ; & l t ; / s c r i p t & g t ; < b r   / > & l t ; s e c t i o n   c l a s s = " F l u x L i b r e S t e p 2 "   i d = " s t e p 2 " & g t ; < b r   / >     & l t ; b u t t o n   c l a s s = " F l u x L i b r e _ _ I c o n B a c k S t e p "   i d = " r e t u r n T o P r e v i o u s S t e p " & g t ; & l t ; / b u t t o n & g t ; < b r   / > < b r   / >     & l t ; d i v   c l a s s = " F l u x L i b r e S t e p 2 _ _ t o p " & g t ; < b r   / > < b r   / > < b r   / >         & l t ; d i v   c l a s s = " F l u x L i b r e S t e p 2 _ _ F r o m T o " & g t ; < b r   / >             & l t ; d i v   c l a s s = " F l u x L i b r e S t e p 2 _ _ F r o m " & g t ; < b r   / >                 & l t ; s p a n & g t ; D e & l t ; / s p a n & g t ; < b r   / >                 & l t ; d i v   c l a s s = " F l u x L i b r e S t e p 2 _ _ C i t y " & g t ; < b r   / >                     P a r i s   & l t ; / d i v & g t ; < b r   / >             & l t ; / d i v & g t ; < b r   / >             & l t ; b u t t o n   t y p e = " b u t t o n "   c l a s s = " F l u x L i b r e _ _ I c o n S w i t c h "   i d = " f l u x L i b r e S w i t c h C i t y " & g t ; & l t ; / b u t t o n & g t ; < b r   / >             & l t ; d i v   c l a s s = " F l u x L i b r e S t e p 2 _ _ T o " & g t ; < b r   / >                 & l t ; s p a n & g t ; V e r s & l t ; / s p a n & g t ; < b r   / >                 & l t ; d i v   c l a s s = " F l u x L i b r e S t e p 2 _ _ C i t y " & g t ; < b r   / >                     C a e n & l t ; / d i v & g t ; < b r   / >             & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >     & l t ; / d i v & g t ; < b r   / > < b r   / > < b r   / >     & l t ; d i v   c l a s s = " F l u x L i b r e S t e p 2 _ _ R o a d " & g t ; < b r   / >         & l t ; u l   c l a s s = " S t e p P r o g r e s s   l i s t - i n l i n e " & g t ; < b r   / >             & l t ; l i   c l a s s = " S t e p P r o g r e s s _ _ F r o m T o C i t y " & g t ; < b r   / >                 P a r i s < b r   / >             & l t ; / l i & g t ; < b r   / >             & l t ; l i   c l a s s = " S t e p P r o g r e s s - i t e m " & g t ; < b r   / >                 & l t ; i n p u t   t y p e = " c h e c k b o x "   i d = " p o i n t 1 "   n a m e = " p a s s a g e "   v a l u e = " point1">

Heudebouville

12 €
A10


[*]


Montreuil
(n°6a)

12 €
A11


[*]


Babille

12 €

A12


[*]


Handover

Ouverture du portic flux libre le 25/12/2024

A13


[*]


Provide

(n°6a)


6 €

A51


[*]


feedbackDo

(n°6a)


6 €

A51


[*]
Caen



Selected option:


{{ fluxLibreTotalPrice}}

0

Подробнее здесь: https://stackoverflow.com/questions/784 ... -js-jquery