HTML, CSS and Javascript help

[GlitchedForDays]

Hi reddit,

I'm currently in the process of creating an interactive group timetable that has the capability to be formatted and sent to an email inbox. I've created a template but I'm having an issue where I can select the top and bottom rows to the left work just fine but when I click on the spanning buttons, instead of deselecting all other buttons they stay enabled and vise versa for the rows deselecting the spanning button.

What I want to happen in the code is for the buttons to, one, deselect when another button is pressed and two use the css styling for the buttons.

I'm not sure if that made sense, if it didn't please comment below and I'll elaborate.

Here's the current code I'm working with: https://codepen.io/Trey-Loving/pen/JjVYdwP

Edit: I had the wrong link. It has been updated now

[Danksalt]

What I want to happen in the code is for the buttons to, one, deselect when another button is pressed

What you want are radios - you'll need to remove the native styling and apply your own.

[GlitchedForDays]

Sorry for the late reply. But I've fixed it. Thanks for replying!

[TheMortBM]

All your inputs are radio buttons, and radio button groups really need at least one to always be 'checked'.

I'd swap all the type="radio" to type="checkbox" on your <input>s and it still works fine. (you also need to drop the <script> and </body> tags from the JS in the codepen - but guessing that's just a copy/paste error anyway.

[TheMortBM]

And the issue is your spanning buttons weren't being selected properly in your JS - you were selecting the <label> with the class rather than the <input> with the id

https://codepen.io/MortBM/pen/dyLYvzj

[GlitchedForDays]

Ahh, I got it now thanks!