input[type=radio]checked help
How to select other divs/elements in css with checked option? So if radio-button is checked, something will happen? What would the proper syntax be?
Does radio-button need to be in parent div, or can I change properties of parent div OF radio-button.
Pls halp. 🙂
50 Replies
What exactly are you trying to do? What have you tried?
As of right now your question is too vague. You can use the
has, is, with, ::checked, etc. combined with some other selectors (+, ~, etc) but without knowing what your goal is and what you've tried it's impossible to answer.
Please see #How To Ask Good Questions for a primer on best methods.Basically I want to check a radio button, and when it is checked, for something to happen as I explained. So if I check radio-button, I want for my hidden div bellow it to appear. So syntahx would be something like input[type=radio]::checked ~ .div-appear { display:block;} right?
My question was just how the proper syntax goes and can you even do that?
"something to happen" is too vague. What do you want to happen? What's the code look like? What have you tried?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
I literally wrote what.
"I want for my hidden div bellow it to appear."
That comment is of literally zero help, @coldish . Suggesting something even more vague than the question don't help at all
Ok, so what does the code look like?
If you don't show the code we can't help
I have a radio button and below it I have a div that I want to appear.
CSS selectors are based on the HTML structure. If you don't show the structure it's very difficulty to give the right selectors
<input>
<div>
Oh
So it does have connection with HTML structure
?
Ok wait
I will be more elaborate
If the div is a direct sibling of the input you can use the
+ combinator, for example. But if it's not a direct sibling you might need to use the ~ combinator instead. Or something more convoluted
sooo
wait
Radio needs to do 2 things
Can you please use codeblocks for your code? Makes it eaiser to read:
```html
<!-- HTML code goes here -->
```
To change the border of .btp-box when selected AND to show .btp-box-bottom
I have no clue how to do that. xD This is my first time here xD
I jus showed you how. Also, as linked earlier, #How To Ask Good Questions
sec
you can edit your post, no need to copy and re-post
Here
Should be more readable than me just typing
☝️
☝️
Codeblocks. Not screen shots
I know but what is wrong with this? You can see everything and question is simple?
Me formating my HTML will take longer
and be more obscure
It's literally hitting the "EDIT" button on your prior message and adding 10 characters
I can't copy/paste from a screen shot
In order to test the code I need to run the code. Hence why we suggest code blocks or a codepen
This?
Yes
Dunno looks ugly
But I guess there is auto format
Either way, Should I repeat my question if the code is readable?
To change the border of .btp-box when selected AND to show .btp-box-bottom
You can add syntax highlighting to make it look nicer by adding "html" right after the first 3 backticks on the same line
The syntax highlighting is working, Vince
Is that doable with that structure?
Oops I'm on mobile 🤫
xD
Mobile doesn't show, sadly
Ok good to hear its working
So you want to:
1) change the border of
.btp-box
2) show .btp-box-bottom
When the first radio button is selected?yeah
Gotta run out the door quick. Be back in about 15min. Will have codepen for you when I return
Sure! Will go get a snack myself.
Also there is a single radio button. Other is type"number"
Ok, here are two variants of what you're asking for. The first is CSS only, but since it uses the
:has() selector it doesn't work on Firefox. And it's also very tied to the current HTML DOM.
https://codepen.io/c__beck/pen/bGKogXx
This second one uses JS, which I believe to be the best option since it works in all browsers and doesn't rely on the DOM being in any specific order. It uses the data-* attribute so you don't have to worry about changing classes or duplicating classes on any elements. As long as the data attributes are correct it'll work:
https://codepen.io/c__beck/pen/eYKGveZ
@DovahOh. So until :has() is widely supported, there is no way to do it via CSS only?
Will do it JS way!
Thanks for the help! 🙂
Even though you can do it CSS only it's not really what CSS is designed to do. This is, in my opinion, clearly a job for JavaScript. It waits for an event, then it Does the Thing™️
You can use CSS to make some classes that JS adds/removes, but the interactiveness of the site should be done via JS. Just like you don't inject most of the content via CSS or JS, you use HTML for that
Roger.
Thanks for the help! 🙂
Actually, let me rephrase a bit. Part of what you are wanting to do (display hidden items) is very much a JS thing. Changing the parent based on child inputs can be a CSS thing since it has to do with the way the page looks. Once Firefox gets onboard with
:has() you can do the "this element gets an outline when its descendent is selected" bit in CSS, but the show/hide of the other, somewhat removed, element is best kept in JS.
Heck, you could even do the CSS and throw in a feature query type check in JS to only run when the browser doesn't support :has().Understood. I kinda like "If CSS can do it, do it with CSS" though. xD And will be looking forward to :has()
I updated the JS version to include the
:has() selector for the outline in CSS and added a check in the JS so if the browser does support :has() then it will bypass the "add the .outlined class" code.Roger. Thanks for all the effort. 🙂
👍
Sooo, how do I add it to multiple radio-boxes?
When I go with querySelectorAll
and add for loop, it marks every div instead of single one
It usually works, don't know if it has to do with radio-button. 😦
@cvanilla13eck
When you use
querySelectorAll you're getting a nodelist of elements, not a single one, so you can't .addEventListener(). Instead, what you should do is use event delegation so you have one listener on the parent element that then uses event.currentTarget to find the what was clicked on and get the correct data-* attribute to set.Okay. Since I'm too tired to process all this information, I'll check it out tomorrow!
Will ping you if I'm still lost! 😄
Listening for events on multiple elements using JavaScript event de...
In JavaScript, event listeners have to be attached to individual elements. You can’t attach them to an array or node list of matching elements like you might in jQuery.
Today, we’re going to look at a technique that you can use listen for the same even on multiple elements without having to attach to each element individually: event delegation.
...
@cvanilla13eck I have continuation of yesterdays topic. I need help with group of radio buttons and JS. Should I make new thread in JS section or are you able to help me? 😄