Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

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

December 31 (8 years ago)
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? 
December 31 (8 years ago)

Edited December 31 (8 years ago)
plexsoup
Marketplace Creator
Sheet Author
API Scripter
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.



January 01 (8 years ago)

Edited January 02 (8 years ago)
That worked! Thanks you much!
January 01 (8 years ago)
Finderski
Pro
Sheet Author
Compendium Curator

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.

January 01 (8 years ago)
vÍnce
Pro
Sheet Author
I think you could adjust your css to recognize a given value as well, right?  ie  input[value=5]
January 02 (8 years ago)

Edited January 02 (8 years ago)
Finderski
Pro
Sheet Author
Compendium Curator

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...
January 02 (8 years ago)

Edited January 02 (8 years ago)
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. 
January 03 (8 years ago)
vÍnce
Pro
Sheet Author
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
January 03 (8 years ago)
Lithl
Pro
Sheet Author
API Scripter

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".