How to Add Classes to Clicked Items Using Vanilla JS

Learn to effectively manage active classes on radio buttons using Vanilla JavaScript in your web forms.
---
This video is based on the question https://stackoverflow.com/q/67469090/ asked by the user 'william_eduards' ( https://stackoverflow.com/u/13760860/ ) and on the answer https://stackoverflow.com/a/67469592/ provided by the user 'pilchard' ( https://stackoverflow.com/u/13762301/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Click label to add class to current target and remove from any other (vanilla JS)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering Class Management in JavaScript for Radio Form Selection

In modern web development, one common interaction that enhances user experience is allowing users to click a label to select options in a form. However, managing the visual representation of the currently selected option can often get complicated. This guide will guide you through the process of using Vanilla JavaScript to add a class to the current target and remove it from any others—a method particularly useful when working with radio button selections in forms.

The Problem: Selecting Plans with Radio Buttons

Imagine you have three forms on your webpage, each with radio buttons allowing users to select one of several plans. You want the user to click on a label corresponding to a plan, activating the radio button, while also shifting a visual slider to convey this activation clearly.

The challenge lies in the requirement to highlight the selected plan. Specifically, when a user clicks on a label, you must ensure that only the currently selected label shows a distinct class (e.g., select-plan__label--active). Additionally, any previously selected labels should have this class removed to keep the interface clean and intuitive.

The Solution: Implementing the Functionality

Here's a step-by-step breakdown of how to achieve the intended functionality using Vanilla JavaScript.

Step 1: Selecting Elements

To start, you'll need to query all radio buttons in your forms. You can achieve this using the querySelectorAll function to select elements with the class .select-plan__radio:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Adding Event Listeners

Next, iterate over each radio button and attach an event listener that triggers a function to handle the class management whenever a label is clicked:

[[See Video to Reveal this Text or Code Snippet]]

The changeRadio function will be responsible for the main functionality of adding and removing classes based on user interaction.

Step 3: Implementing the Change Function

Inside the changeRadio function, you'll want to perform the following actions:

Remove the Active Class: Select all elements currently marked with select-plan__label--active and remove this class.

Add the Active Class: Finally, apply the active class to the currently clicked label.

Here’s how the function looks:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Enhancing Visual Feedback with CSS

To complement the JavaScript functionality, you'll want to modify your CSS for better visual feedback. Change the appropriate CSS selector to ensure the slider adjusts position based on the selected radio input.

For example:

[[See Video to Reveal this Text or Code Snippet]]

Adjust this by fine-tuning the position based on the selected radio type, maintaining a smooth user experience.

Final Thoughts

Managing classes based on user interactions can significantly enhance the usability of your forms. By effectively utilizing JavaScript and CSS together, you can create an interactive environment that not only fulfills functional requirements but also improves overall aesthetic appeal.

Example Code Implementation

Here’s a concise version of your HTML combined with the JavaScript and CSS:

[[See Video to Reveal this Text or Code Snippet]]

By following this guide, you can easily implement a professional and user-friendly selection interface in your web applications. Enjoy coding!