Radio Buttons as a Tracker

I've tried to figure out how to do this and I've searched the forums but not sure what you would call this. Basically, I want to use radio buttons as a tracker for damage. I have 10 radio buttons lined up in a row. The trick is that if someone checks the 7th radio, then I'd like the 6 buttons before it to fill as well. If they check the 4th buttons, only the 1st 4 boxes would be filled. Then I'd need a final button they could push that would clear all the radio buttons. I've checked over sheets that do this kind of thing such as the common skills in The One Ring RPG  character sheets but for the life of me I can't figure out how it's done. Any help on this would be appreciated.

The most obvious to me way to do this is not to use radio buttons, but checkboxes, and just making them look like a radio button. Name them damage_0, damage_1, damage_2, etc. Then have a sheet worker that when you click one of the buttons, automatically fills all buttons below it, and clears all buttons above it. You need to make sure that sheetworker uses the SetAttrs option, silent:true,  so that it doesnt trigger itself.

And do you know where I might find an example of this so that I could study it and try to understand what I need to do?

I do indeed! Say you name the checkboxes as above, from damage_0 to damage_10. make sure they have value="1", like so <input type="checkbox" class="damage-boxes" name="attr_damage_0" value="1"> You'll likely want to use the damage-boxes style to apply CSS to change the appearance of the buttons. Then use this sheet worker const damageButtons = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => `change:damage_${i}`).join(' '); on(`${damageButtons}`, (eventInfo) => {     const clicked = parseInt(eventInfo.sourceAttribute.slice(7)) || 0;     const output = {};     for (let i = 0; i <= 10; i++) {         output[`damage_${i}`] = (i <= clicked) ? 1 : 0;     }     setAttrs(output, {         silent: true     }); });

Thank you very much. I will look into the damage-boxes styling.

I think having a single attribute makes more sense than a series of attributes with checkboxes. Taking health as an example, it's handy for other reasons to have a numerical value to represent the health. You can incorporate the player token bar overlay, for example. The way I did this is with a series of buttons for each checkbox and a series CSS classes for the display of those checkboxes. (In my sheet, these are "dots" rather than "checkboxes", but the goal is the same.) &lt;div class="dots spread"&gt; &lt;input type="hidden" name="attr_power" value="1" /&gt; &lt;button type="action" class="dot" name="act_power_1"&gt;&lt;/button&gt; &lt;button type="action" class="dot ne-1" name="act_power_2"&gt;&lt;/button&gt; &lt;button type="action" class="dot ne-1 ne-2" name="act_power_3"&gt;&lt;/button&gt; &lt;button type="action" class="dot ne-1 ne-2 ne-3" name="act_power_4"&gt;&lt;/button&gt; &lt;button type="action" class="dot ne-1 ne-2 ne-3 ne-4" name="act_power_5"&gt;&lt;/button&gt; &lt;/div&gt; for (let value = 1; value &lt;= 5; value++) { &nbsp; on(`clicked:power_${value}`, (eventInfo) =&gt; { &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; "power": value &nbsp; &nbsp; }); &nbsp; }); } input[type="hidden"][value="1"] ~ button.sheet-dot:not(.sheet-ne-1), input[type="hidden"][value="2"] ~ button.sheet-dot:not(.sheet-ne-2), input[type="hidden"][value="3"] ~ button.sheet-dot:not(.sheet-ne-3), input[type="hidden"][value="4"] ~ button.sheet-dot:not(.sheet-ne-4), input[type="hidden"][value="5"] ~ button.sheet-dot:not(.sheet-ne-5) { /* Apply "active" styling" */ background: #404040; background: -moz-radial-gradient(#404040, #404040); background: -webkit-radial-gradient(#404040, #404040); background: -ms-radial-gradient(#404040, #404040); background: -o-radial-gradient(#404040, #404040); background: radial-gradient(#404040, #404040); } This displays a filled circle whenever the value does&nbsp; not &nbsp;match one of the ne-* classes on that button. (This uses background to distinguish an active dot, but you can have a child `&lt;span class="checked"&gt;` on each button that holds the content / styling to be displayed when the button is active.) A similar example can be found here:&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left</a>

That's a good approach! But just as an addendum to my last post, you can use the single sheet worker and single attribute. Create a hidden attribute to hold the total, name it something like damage_total, and update it with the sheet worker: const&nbsp;damageButtons&nbsp;=&nbsp;[0,&nbsp;1,&nbsp;2,&nbsp;3,&nbsp;4,&nbsp;5,&nbsp;6,&nbsp;7,&nbsp;8,&nbsp;9,&nbsp;10].map(i&nbsp;=&gt;&nbsp;`change:damage_${i}`).join('&nbsp;'); on(`${damageButtons} change:damage_total`,&nbsp;(eventInfo)&nbsp;=&gt;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;const slice = eventInfo.sourceAttribute.slice(7); &nbsp;&nbsp;&nbsp;&nbsp;const clicked = ( slice === 'total') ? eventInfo.newValue : (parseInt(eventInfo.sourceAttribute.slice(7))&nbsp;||&nbsp;0); &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;output&nbsp;=&nbsp;{}; &nbsp;&nbsp;&nbsp;&nbsp;if(!slice === 'total') output.damage_total = clicked; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(let&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;=&nbsp;10;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output[`damage_${i}`]&nbsp;=&nbsp;(i&nbsp;&lt;=&nbsp;clicked)&nbsp;?&nbsp;1&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;setAttrs(output,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;silent:&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;}); }); This gives you a hidden attribute named damage_total you can use in token bars and whatnot.

Thank you both very much. It'll take me a little bit of time to just kind of figure out how all the formulas are working so I can have an actual understanding of it all but this is greatly helping me for the sheet I'm doing for my group's upcoming game. In this particular RPG the 'damage' capacity of any give player can be variable from encounter to encounter because a different stat is being used to track their 'health'. In my mind, the simplest solution to this problem was to give them a set of boxes or radios that they can easily modify for the 'health' stat they will be using for that encounter.