Kevin Powell - Community•3y ago

Sync checkboxes without JS

Super simple; I have two checkboxes on the page, I can use whatever attributes I like so long as there is no JavaScript being run. The result I want is that when one of them is clicked on, both of them become checked. Then, when either is clicked again, both become unchecked. I swear I did this before, I'm not dreaming it up am I?

9 Replies

Jochem•3y ago

could you wrap one in a label for the other, and the other in a label for the one? just thinking out loud

WillsterJohnsonOP•3y ago

oh, maybe...

Jochem•3y ago

hm, doesn't seem to work in firefox :/

WillsterJohnsonOP•3y ago

sadly not, this just acts as two checkboxes

<label for="one"><input type="checkbox" id="two"></label>
<label for="two"><input type="checkbox" id="one"></label>

<label for="one"><input type="checkbox" id="two"></label>
<label for="two"><input type="checkbox" id="one"></label>

Joao•3y ago

Maybe you can style each input to look like it's checked when the other actually is... But actually doing it without JavaScript I don't think it's possible? I'm really curious about the use case too

MarkBoots•3y ago

does this count as "whatever attribute"?

<input type="checkbox" onchange="this.nextElementSibling.checked = this.checked">
<input type="checkbox" onchange="this.previousElementSibling.checked = this.checked">

<input type="checkbox" onchange="this.nextElementSibling.checked = this.checked">
<input type="checkbox" onchange="this.previousElementSibling.checked = this.checked">

Joao•3y ago

WillsterJohnsonOP•3y ago

it meets "whatever attribute" but not "no JavaScript being run" unfortunately I'm trying to cheese markdown's checklist feature to have a "this OR this" where they're separate checkboxes but completing one counts as completing the other

- [ ] this thing, OR
- [ ] this thing

- [ ] this thing, OR
- [ ] this thing

I can put html in there, but CSS or JS get stripped by and responsible site I might publish on, eg GitHub I can work around it with something like

- [ ] either;
  - this thing
  - this thing

- [ ] either;
  - this thing
  - this thing

but I was sure you could sync checkboxes with pure HTML

MarkBoots•3y ago

nah, there isn't a html-only solution for this. can not see how

Gaming

Programming

Sync checkboxes without JS