Show/Hide checkbox that doesn't care about the DOM.

So I have an already existing character sheet that uses a fairly complex set nested tabs to make it easy to navigate and use for players. What i'm trying to do is have a checkbox that is used to 'purchase' a discipline. Then if that checkbox is checked, it should show, on a diffrent tab, a div with a matching named class. The key difficulty is that the relative location may change as options are added / subtracted from the charactersheet, so I would like something flexible, that is always able to find the elements that should be shown/hidden, without caring where they exist on the DOM.  Is this a CSS unicorn, or can something like this be done? 

You're in luck. The trick is to duplicate the checkbox with matching names and attribute values (attr_whatever), put one at the top of the DOM and hide it. Put the other one wherever you like. When you click one, it'll update the attribute, which will change the state of the other checkbox to match.

That worked! Thanks you much!

Bryan W. said: That worked! Thanks you much! Pro Tip : If you use a value-feild in your checkboxes (so that you can check the box and have it add numbers into other stuff), this will not work.   Not sure I follow...I use duplicate checkboxes all the time to hide/show stuff and I always use a value field.  Can you give an example of what you were trying to do (i.e. show your code)? In fact, you can mix and match different input types too. For example, I recently did a drop down menu for a set of religions, and then used checkboxes with the same name as the drop down menu, each checkbox with a different value, to show/hide different aspects related to each religion.

I think you could adjust your css to recognize a given value as well, right?  ie  input[value=5]

Vince said: I think you could adjust your css to recognize a given value as well, right?  ie  input[value=5] Yep. :) EDIT: Back at my computer now...for an example, you can see  this ...

Got it working with value. The issue was two diffrent values in each of the duplicated checkboxes. Not sure why that didn't occur to me the first time around. I was wrestling with it, getting frustrated, starting removing random stuff, and when the value got taken off, it worked correctly, so i said f*ck it and moved on.   So errata to the above (which i'll be removing, so as not to confuse people who find this topic) .. Make sure your value in each duplicated checkbox is identical. My guess is that the value was getting saved in the backend, and autocalc was stepping on it's own foot, not recogizing the opposite checkbox. 

Thanks for the update Bryan.  There seems to be 101 ways to skin an Orc.  Some of the coolest character sheet tricks come from accidents.  Cheers

Bryan W. said: Make sure your value in each duplicated checkbox is identical. My guess is that the value was getting saved in the backend, and autocalc was stepping on it's own foot, not recogizing the opposite checkbox.  Yes. In order to abuse Roll20's synchronizing of all inputs tracking the same attribute, you need to have the same value on the checkboxes you want to be on at the same time. =) On that note, if you omit the value attribute from the checkbox, I believe you get the same result as if you had value="on".