Checkboxes and autocalc for Fitd system

Hello!  I'm currently in the throws of trying to code my first sheet with very little experience and would like some help. I'm making something similar to a Forged in the Dark system.  Specifically, I want these checkboxes to correspond to an amount of d6's the PC can roll. Ideally this would also correlate to a button that would automatically roll that number of d6 based on boxes ticked.  Below in the original blades in the dark system, each of these pips have additional behaviors. Hitting the third pip automatically checks the first and second, and each of them can be deselected and selected.  Any advice, thoughts, or prayers how I would best go about recreating this for my own sheet would be extremely appreciated. Please keep in mind I am very new to this, and would genuinely appreciate if you explained this to me like I'm five. Thank you in advance. 

Hi Herman, congrats on building your own sheet.&nbsp; It can be very a fulfilling endeavor.&nbsp; This might help; <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> Cheers

I'll have to check that out, as I do it from time to time but always use the "older" sheet worker method. To OP, those checkboxes are actually radio buttons, and then the radio checked is the numerical value - your power attribute is very easily assigned. And once you have that, a button to roll the dice is easy (just use something like /roll @{power_atribute}d6)

I'll note that some recent CSS developments have made this even easier to create: HTML &lt;div class="radiocontainer"&gt; &lt;input class="radiobox" type="checkbox" name="attr_strength" value="1"&gt; &lt;input class="radiobox" type="checkbox" name="attr_strength" value="2"&gt; &lt;input class="radiobox" type="checkbox" name="attr_strength" value="3"&gt; &lt;input class="radiobox" type="checkbox" name="attr_strength" value="4"&gt; &lt;input class="radiobox" type="checkbox" name="attr_strength" value="5"&gt; &lt;input class="radiobox" type="checkbox" name="attr_strength" value="6"&gt; &lt;/div&gt; CSS .radiocontainer{ /* style the layout and whatnot of the radio container as you need to */ display: flex; gap: 0.5rem; } .radiobox{ /* appearance none allows us to style radios and checkboxes as if they were divs */ appearance: none; /* Style the radio as you want for it's unchecked state */ &nbsp;&nbsp;border-radius: 50%; border: 1px solid black; width: 10px; height: 10px; display: block; } /* If the radiobox is checked, or if it has a checked radiobox after it, style it as if it was checked */ .radiobox:checked, .radiobox:has(~ .radiobox:checked){ /* Style the check state as you want */ background-color: black; } Note that I used checkboxes to make it easier to unselect all boxes without needing to mess with the ordering and z-indexing stuff. If your fill to left section needs to not allow itself to be completely unselected, then switch these to radios, and they'll work out of the box for that. The CSS is also much simpler with the advent of the :has selector.

I like your comments in the CSS. Far too often when people post CSS, they they don't explain which parts do which part making it very confusing to sort through the code.

I'll have to add this to the wiki. Thanks Scott

Thank you all so much! this has been really helpful!