单击 label 将 class 添加到当前目标并从任何其他目标中删除（原版 JS）

Question

I have 3 forms, where I have input type="radio" to select one plan. What I expect to accomplish is to click on label of any plan from these 3 forms, make current clicked label target radio active, and move the position of the of "range slider" to necessary plan chosen. My biggest problem is that I don't understand, how to add class to current item that I would click and remove it from all others? Please could someone give a clue?

Here is the code snippet.

 var selectPlanLabel = document.querySelectorAll('.select-plan__radio'); for (var i = 0; i < selectPlanLabel.length; i++) { selectPlanLabel[i].addEventListener('click', changeRadio.bind(null, i)); } function changeRadio(selected, e) { var planLabelActive = document.querySelectorAll('.select-plan__label--active'); for (var i = 0; i < planLabelActive.length; i++) { planLabelActive[i].classList.remove('select-plan__label--active'); } e.target.classList.add('select-plan__label--active'); }

 .container { max-width: 350px; margin: 0 auto; padding: 0 15px; }.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }.select-plan { text-align: center; margin-top: 80px; }.spacer { width: 100%; }.spacer-gap--16 { padding-bottom: 16px; }.spacer-gap--30 { padding-bottom: 30px; }.select-plan__container { display: flex; justify-content: space-between; position: relative; }.select-plan__radio, .select-plan__label { display: block; cursor: pointer; }.select-plan__label { z-index: 10; flex-grow: 1; }.select-plan__radio { flex-shrink: 1; }.dimensional-container { display: flex; flex-direction: column; align-items: center; justify-content: center; }.select-plan__range-slider { width: 100%; position: absolute; top: 30%; height: 8px; border-radius: 20px; background: #fff; box-shadow: inset 0px 0.820721px 3.28288px rgba(37, 71, 122, 0.25); z-index: 1; }.select-plan__range-slider::after { content: ''; position: absolute; width: 20px; height: 20px; display: block; left: 0; top: calc(30% - 10px); border-radius: 50%; background: #4376A6; box-shadow: -0.820721px 0.820721px 1.64144px rgba(0, 0, 0, 0.25); z-index: 1; }

 <div class="container"> <form class="select-plan" action=""> <div class="select-plan__container"> <div class="select-plan__range-slider"></div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month"> <label class="select-plan__label" for="select-month">1 month</label> </div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month" checked> <label class="select-plan__label select-plan__label--active" for="select-three-month">3 month</label> </div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month"> <label class="select-plan__label" for="select-twelve-month">12 month</label> </div> </div> <div class="spacer spacer-gap--16"></div> <button class="select-plan__submit" type="submit">Try now</button> </form> <form class="select-plan" action=""> <div class="select-plan__container"> <div class="select-plan__range-slider"></div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month"> <label class="select-plan__label" for="select-month">1 month</label> </div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month" checked> <label class="select-plan__label select-plan__label--active" for="select-three-month">3 month</label> </div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month"> <label class="select-plan__label" for="select-twelve-month">12 month</label> </div> </div> <div class="spacer spacer-gap--16"></div> <button class="select-plan__submit" type="submit">Try now</button> </form> <form class="select-plan" action=""> <div class="select-plan__container"> <div class="select-plan__range-slider"></div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month"> <label class="select-plan__label" for="select-month">1 month</label> </div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month" checked> <label class="select-plan__label select-plan__label--active" for="select-three-month">3 month</label> </div> <div class="dimensional-container"> <div class="spacer spacer-gap--30"></div> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month"> <label class="select-plan__label" for="select-twelve-month">12 month</label> </div> </div> <div class="spacer spacer-gap--16"></div> <button class="select-plan__submit" type="submit">Try now</button> </form> </div>

Answer 1

You can do this with CSS by moving the slider indicator to each radio rather having it based on the slider bar.

change

.select-plan__range-slider::after

to

input.select-plan__radio[type="radio"]:checked+label::before

You'll need to fine-tune the spacing.

 .container { max-width: 350px; margin: 0 auto; padding: 0 15px; }.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }.select-plan { text-align: center; margin-top: 80px; }.spacer { width: 100%; }.spacer-gap--16 { padding-bottom: 16px; }.select-plan__container { display: flex; justify-content: space-between; position: relative; }.select-plan__radio, .select-plan__label { display: block; cursor: pointer; }.select-plan__label { z-index: 10; flex-grow: 1; display: block; height: 48px; display: flex; flex-direction: column-reverse; }.select-plan__radio { flex-shrink: 1; }.dimensional-container { display: flex; flex-direction: column; align-items: center; justify-content: center; }.select-plan__range-slider { width: 100%; position: absolute; top: 30%; height: 8px; border-radius: 20px; background: #fff; box-shadow: inset 0px 0.820721px 3.28288px rgba(37, 71, 122, 0.25); z-index: 1; }.select-plan__radio[type="radio"]:checked+label::before { content: ''; position: absolute; width: 20px; height: 20px; display: block; top: calc(30% - 10px); border-radius: 50%; background: #4376A6; box-shadow: -0.820721px 0.820721px 1.64144px rgba(0, 0, 0, 0.25); z-index: 1; }.select-plan__radio[value="one-month"]:checked+label::before { left: 0%; background: lightgray; }.select-plan__radio[value="three-months"]:checked+label::before { left: 46.5%; background: pink; }.select-plan__radio[value="twelve-months"]:checked+label::before { left: 95%; background: tomato; }

 <div class="container"> <form class="select-plan" action=""> <div class="select-plan__container"> <div class="select-plan__range-slider"></div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month"> <label class="select-plan__label" for="select-month">1 month</label> </div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month" checked> <label class="select-plan__label select-plan__label--active" for="select-three-month">3 month</label> </div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month"> <label class="select-plan__label" for="select-twelve-month">12 month</label> </div> </div> <div class="spacer spacer-gap--16"></div> <button class="select-plan__submit" type="submit">Try now</button> </form> <form class="select-plan" action=""> <div class="select-plan__container"> <div class="select-plan__range-slider"></div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month2"> <label class="select-plan__label" for="select-month2">1 month</label> </div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month2" checked> <label class="select-plan__label select-plan__label--active" for="select-three-month2">3 month</label> </div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month2"> <label class="select-plan__label" for="select-twelve-month2">12 month</label> </div> </div> <div class="spacer spacer-gap--16"></div> <button class="select-plan__submit" type="submit">Try now</button> </form> <form class="select-plan" action=""> <div class="select-plan__container"> <div class="select-plan__range-slider"></div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month3"> <label class="select-plan__label" for="select-month3">1 month</label> </div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month3" checked> <label class="select-plan__label select-plan__label--active" for="select-three-month3">3 month</label> </div> <div class="dimensional-container"> <input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month3"> <label class="select-plan__label" for="select-twelve-month3">12 month</label> </div> </div> <div class="spacer spacer-gap--16"></div> <button class="select-plan__submit" type="submit">Try now</button> </form> </div>