Advanced Custom Radio Buttons (CSS, jQuery) | Separate Label & Input in Radio Button

We have shared videos about creating custom radio button design by using only CSS and by using JavaScript already. This is advanced tutorial that makes use of CSS and JavaScript to create custom radio button design where input and label are separate. Radio inputs are outside labels. So clicking at label won't check radio input button automatically. Design that you are going to see in this example is simple but functionality is what I want you to keep your focus at.

This example is different because it has separate label and input field. If we can have input inside label then our job gets easier. Why? because Clicking at label will automatically select or check the input radio button. But here we have them separate. If you work with Shopify or WordPress, you will have to use plugins. Plugins inject code for radio buttons that have separate label and input. Radio Input buttons is not inside label. Original input radio buttons are hidden. We will design our own radio buttons.

I have CSS file, jQuery file and custom javascript file linked with HTML file. We have two groups of radio input fields. Radio buttons that belong to same group has same name. We are not using values because we don't need values here. We are not submitting values. If we want any radio button 'checked' by default, it should have attribute 'checked' in input

Part of our functionality is to have an additional class named as 'radio'. If we will have a class 'checked' with div containing class 'radio', it will show checked state and we will have to add checked attribute in its input element.

We will hide original radio input buttons - because we are designing our own - but original radio input will be there for its value. If div with class 'radio' will have class 'checked', we will style label inside it. And now we can style our label as we like. We will just use a check mark as a before pseudo element for the label. At label click, we will get its closest radio group, remove 'chceked' class and 'checked' attribute from inner div and radio button.

We will cover click scenario and we have a checked radio button by default. We have to cover that too. We will check if any radio button is 'checked' or it has class 'checked', if yes we will add 'checked' attribute to input inside it. You can design any radio button by using this technique.

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#css #jquery #webdevelopment #webstylepress #csstutorial #html #htmlcss #js #javascript

[webstylepress]

To watch more related videos, please LIKE, SHARE & SUBSCRIBE! WebStylePress needs your support.