Trying to select only one checkbox at a time

[m_hutley]

@Thallius

This looks horrible to me. What if you add another box? You always have to remember changing CSS too.

What if you add a box that isnt part of the set of checkboxes where you’re doing this? What if you want another set of checkboxes that do this?

Changing the parameters of the problem changes the answer.

@Archibald

Thanks, but can you get the functionality of the checkboxes working with CSS including the ability to untick all checkboxes after one has been ticked (so it’s not like radio buttons)?

Yes. It’s called using a radio. Yaknow. The thing that the HTML input type was… designed for… the form says “Choose one of the checkboxes”, not “Choose one or none of the checkboxes”.

[Thallius]

@m_hutley

What if you add a box that isnt part of the set of checkboxes where you’re doing this? What if you want another set of checkboxes that do this?

Then I give it another class. Easy or?

[m_hutley]

@Thallius

Then I give it another class

So now you need to remember not to use the class you used on these checkboxes for anything else, because they’re a Javascript tag, and not a CSS styling element. Kinda like you’d need to remember to update the CSS if you added another box.

shrug Clearly, we disagree on this. Which is fine. You do it your way, i’ll do it mine.

[m_hutley]

Though I will point out that with the CSS version of unhiding the divs, at least the form would still work if Javascript is disabled; granted, the user would have to be smart enough to only click one checkbox because at that point it’s just a series of checkboxes, but the alternative is being able to check any number of the checkboxes and then also not get the additional divs, because they’re all hidden.

[Archibald]

@m_hutley Why are you so very strongly against using JavaScript to handle the checkbox interactivity here? According to W3Techs 98.7% of websites use JavaScript, including the likes of Google, Microsoft, Facebook, YouTube, Twitter, Netflix, Apple and Instagram (reference).

[m_hutley]

All i’m saying is you’ve got two tools:

One works fine, as long as you have it enabled, otherwise it breaks functionality.
The other just… works. I’m not aware of a browser with the ability to disable CSS. Though one probably does exist somewhere.

At the very least, if you’re going to go Javascript route, fail-safe, and show all the divs by default and hide them with Javascript?

[kicken]

@Archibald

Why are you so very strongly against using JavaScript to handle the checkbox interactivity here?

Speaking for myself, there’s a difference between requiring JavaScript, and just using JavaScript. Most of my work very rarely requires JS to work, but if JavaScript is available it will be used to enhance the user experience. In many cases, coding this way isn’t any harder than the JS-required route. For example:

Edit fiddle - JSFiddle - Code Playground

With JS enabled, you get the desired single-selection with the extra options shown only if the box is checked. If JS is not enabled, everything is still visible and usable. The server-side validation can deal with the case when someone selects multiple choices.