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
13eck
13eckβ€’2y ago
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.
Dovah
Dovahβ€’2y ago
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?
13eck
13eckβ€’2y ago
"something to happen" is too vague. What do you want to happen? What's the code look like? What have you tried?
Unknown User
Unknown Userβ€’2y ago
Message Not Public
Sign In & Join Server To View
Dovah
Dovahβ€’2y ago
I literally wrote what. "I want for my hidden div bellow it to appear."
13eck
13eckβ€’2y ago
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
Dovah
Dovahβ€’2y ago
I have a radio button and below it I have a div that I want to appear.
13eck
13eckβ€’2y ago
CSS selectors are based on the HTML structure. If you don't show the structure it's very difficulty to give the right selectors
Dovah
Dovahβ€’2y ago
<input> <div> Oh So it does have connection with HTML structure ? Ok wait I will be more elaborate
13eck
13eckβ€’2y ago
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
Dovah
Dovahβ€’2y ago
<!-- HTML code goes here -->
<div class="btp-box">
<div class="btp-box-upper">
<div class="btp-box-info-upper">
<input type="radio" name="btp-rewards" id="no-reward">
<p class="btp-bold-p">Pledge with no reward</p>
</div>
<p>
Choose to support us without a reward if you simply believe in our project. As a backer,
you will be signed up to receive product updates via email.
</p>
</div>
<div class="btp-box-bottom">
<p>Enter your pledge</p>
<div class="pledge-input">
<label for="btp-pledge-amount">$</label>
<input type="number" name="btp-pledge-amount" id="pledge-amount" class="pledge-amount">
<button class="pledge-btn">Continue</button>
</div>
</div>
</div>
<!-- HTML code goes here -->
<div class="btp-box">
<div class="btp-box-upper">
<div class="btp-box-info-upper">
<input type="radio" name="btp-rewards" id="no-reward">
<p class="btp-bold-p">Pledge with no reward</p>
</div>
<p>
Choose to support us without a reward if you simply believe in our project. As a backer,
you will be signed up to receive product updates via email.
</p>
</div>
<div class="btp-box-bottom">
<p>Enter your pledge</p>
<div class="pledge-input">
<label for="btp-pledge-amount">$</label>
<input type="number" name="btp-pledge-amount" id="pledge-amount" class="pledge-amount">
<button class="pledge-btn">Continue</button>
</div>
</div>
</div>
sooo wait Radio needs to do 2 things
13eck
13eckβ€’2y ago
Can you please use codeblocks for your code? Makes it eaiser to read: ```html <!-- HTML code goes here --> ```
Dovah
Dovahβ€’2y ago
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
13eck
13eckβ€’2y ago
I jus showed you how. Also, as linked earlier, #How To Ask Good Questions
Dovah
Dovahβ€’2y ago
sec
13eck
13eckβ€’2y ago
you can edit your post, no need to copy and re-post
Dovah
Dovahβ€’2y ago
Dovah
Dovahβ€’2y ago
Here Should be more readable than me just typing
13eck
13eckβ€’2y ago
☝️ ☝️ Codeblocks. Not screen shots
Dovah
Dovahβ€’2y ago
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
13eck
13eckβ€’2y ago
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
Dovah
Dovahβ€’2y ago
This?
13eck
13eckβ€’2y ago
Yes
Dovah
Dovahβ€’2y ago
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
vince
vinceβ€’2y ago
You can add syntax highlighting to make it look nicer by adding "html" right after the first 3 backticks on the same line
13eck
13eckβ€’2y ago
The syntax highlighting is working, Vince
Dovah
Dovahβ€’2y ago
Is that doable with that structure?
vince
vinceβ€’2y ago
Oops I'm on mobile 🀫
13eck
13eckβ€’2y ago
Dovah
Dovahβ€’2y ago
xD
13eck
13eckβ€’2y ago
Mobile doesn't show, sadly
Dovah
Dovahβ€’2y ago
Ok good to hear its working
13eck
13eckβ€’2y ago
So you want to: 1) change the border of .btp-box 2) show .btp-box-bottom When the first radio button is selected?
Dovah
Dovahβ€’2y ago
yeah
13eck
13eckβ€’2y ago
Gotta run out the door quick. Be back in about 15min. Will have codepen for you when I return
Dovah
Dovahβ€’2y ago
Sure! Will go get a snack myself. Also there is a single radio button. Other is type"number"
13eck
13eckβ€’2y ago
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 @Dovah
Dovah
Dovahβ€’2y ago
Oh. 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! πŸ™‚
13eck
13eckβ€’2y ago
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
Dovah
Dovahβ€’2y ago
Roger. Thanks for the help! πŸ™‚
13eck
13eckβ€’2y ago
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().
Dovah
Dovahβ€’2y ago
Understood. I kinda like "If CSS can do it, do it with CSS" though. xD And will be looking forward to :has()
13eck
13eckβ€’2y ago
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.
Dovah
Dovahβ€’2y ago
Roger. Thanks for all the effort. πŸ™‚
13eck
13eckβ€’2y ago
πŸ‘
Dovah
Dovahβ€’2y ago
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
13eck
13eckβ€’2y ago
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.
Dovah
Dovahβ€’2y ago
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! πŸ˜„
13eck
13eckβ€’2y ago
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. ...
Dovah
Dovahβ€’2y ago
@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? πŸ˜„
Want results from more Discord servers?
Add your server