Trying to add hidden checkboxes that appear depending on value

Hello! I'm working on a custom character sheet, and as the topic title suggests I'm currently trying to add  a lot of hidden checkboxes that will appear depending on the character's vitality stat. Essentially: Checkbox 1 is visible and clickable only if the vitality stat is -5 or higher Checkbox 2 is visible  and clickable only  if the vitality stat is -4 or higher etc... What would be the best way to achieve this? sheetworkers? CSS magic? Other? Any snippets, ideas or other sheets I can look at would help out a lot! It's been a while since I worked on my sheet, so it currently requires Legacy sanitization to run properly, if that is a factor?

There are plenty of examples in the wiki of showing and hiding areas. You generally want a hidden input immediately before the thing you want to show or hide (there are other ways to do it, but this is simple). The general sibling selector ~ doesn't require the input to be immediately before the element you're selecting with CSS, but it's generally easier to understand the HTML when you group them. Just don't put it after the element you're trying to select, or it won't work. Without JS might look like this (it could be a lot of CSS depending on how high Vitality can go): // HTML <input class="checkbox_1_toggle" type="hidden" name="attr_vitality"/> <div class="checkbox_1"> {/* checkbox html */} </div> // CSS .checkbox_1 { display:none; } .checkbox_1_toggle[value=-4] ~ .checkbox_1, .checkbox_1_toggle[value=-3] ~ .checkbox_1, .checkbox_1_toggle[value=-2] ~ .checkbox_1, .checkbox_1_toggle[value=-1] ~ .checkbox_1, .checkbox_1_toggle[value=0] ~ .checkbox_1, .checkbox_1_toggle[value=1] ~ .checkbox_1, ...all other possible values .checkbox_1_toggle[value=20] ~ .checkbox_1 { display: block } With sheetworker (preferred method): // HTML <input class="checkbox_1_toggle" type="hidden" name="attr_checkbox_1_toggle"/> <div class="checkbox_1"> {/* checkbox html */} </div> // JS on('change:vitality', (ev) => { const vitality = parseInt(ev.newValue); if (newValue > -4) setAttrs({ checkbox_1_toggle: 1 }); else setAttrs({ checkbox_1_toggle: 0 }); } // CSS .checkbox_1 { display:none; } .checkbox_1_toggle[value=1] ~ .checkbox_1 { display: block } The second method, using a sheetworker to set a separate toggle attribute, is much cleaner. The first method, keying the CSS straight off the stat, is fine if you've only got a few values the stat can take, but horrible when there are many possible values. You may also want a 'sheet:opened' sheetworker to make sure the initial value has the correct checkboxes visible.

I'll add my new (not so new now) favorite method, which is another sheetworker method. This uses the Roll20 Jquery implementation: <input type="number" name="attr_vitality" value="-10"> <input type="checkbox" name="attr_displayed_1" class="show-at show-at--5"> <input type="checkbox" name="attr_displayed_2" class="show-at show-at-0"> <input type="checkbox" name="attr_displayed_3" class="show-at show-at-5"> <input type="checkbox" name="attr_displayed_4" class="show-at show-at-10"> <input type="checkbox" name="attr_displayed_5" class="show-at show-at-15"> <input type="checkbox" name="attr_displayed_7" class="show-at show-at-20"> <script type="text/worker">   const showAt = (vitality) =>{     vitality = +vitality;//Convert the string newValue to a number     const rounded = Math.floor( vitality / 5 ) * 5;     //Remove the active class from all the show-at's to reset them.     $20('.show-at').removeClass('active');     //Iterate through the possible numbers that should show, counting down from the current closest 5 to the minimum multiple of 5.     for( let i = rounded ; i > -10 ; i -= 5 ){       //Add the active class to these elements       $20(`.show-at-${i}`).addClass('active');     }   }   on('change:vitality',(event)=>{     showAt(event.newValue);   });   //Because we're using the jquery implementation, we need to set up the display when the sheet is opened.   on('sheet:opened',()=>{     getAttrs(['vitality'],(attributes)=>{       showAt(attributes.vitality);     })   }); </script> CSS .show-at:not(.active){   display:none; } The reason I like this method is because it keeps our html and CSS clean, and puts the logic in the javascript where it belongs. You can see how the three lines of CSS for this method compare to the ballooning CSS of the non Jquery methods. Additionally, our HTML only increases at a 1 for 1 rate as we add checkboxes (or whatever element you want to show/hide, instead of adding ~3 lines for each new checkbox that the non sheetworker method uses.

Awesome, thanks! None of the options seemed to work while using legacy sanitization, but that just gave me a push to fix some of my outdated code, it now works as intended! I appreciate it!