[Help] Styled Botton Label Inside a Fieldset

I am trying to have an action button to act like a checkbox inside a fieldset. The button's label is blank until the user clicks the button, then an "x" is displayed. The input attribute is being set properly in the character sheet. I can see the value change in the attributes tab from "0" to "1" when I click on the button. But the "x" is not displaying when the attribute's value is changed to "1". Here is the HTML, CSS and Sheetworker code: HTML:  <fieldset class="repeating_skills"> <input type="hidden" class="toggle" name="attr_showslv-flag"/> <div> <button type="action" name="act_showslv" class="toggle"> <span class="slv-checked">X</span> </button> </div> </fieldset> CSS: .charsheet input.toggle:not([value="1"]) ~ div button.toggle > span.slv-checked  {     display: none; } Sheetworker: const toggleList = ["showslv"]; toggleList.forEach(function(button) {     on(`clicked:${button}`, function() {         const flag = `${button}-flag`;         // Check the current value of the hidden flag.         getAttrs([flag], function(v) {         // Update the value of the hidden flag to "1" for checked or "0" for unchecked.         setAttrs({           [flag]: v[flag] !== "1" ? "1" : "0"        });      });    });  }); I can't figure out why I can't get the "x" to display when I click the button. I know the "x" displays when I comment out the css, and it is not visible when the css is not commented out, so I don't think it's not a selector issue. The Sheetworker seems to work because I can see the value in the attributes tab toggle between "0" to "1"  when I trigger it on and off. I thought maybe it's because it's inside a fieldset, but I haven't been able to find anything that tells me there should be anything in particularly different for the button inside the fieldset besides the naming conventions. I would really appreciate help on this. 

Buttons, and all attributes inside a repeating section, need to have the a name that includes the repeating section name when using them in a sheet worker. Sometimes they need a row id as well, but you dont need that here. Here's code that works for that specific button (whatever row its on). on(`clicked: repeating_skills :showslv`, function() {     getAttrs(['repeating_skills_showslv-flag'], function(v) {         const flag = +v['repeating_skills_showslv -flag '] || 0;         const toggle = 1 - flag;         setAttrs({           ['repeating_skills_showslv -flag ']: toggle        });     }); }); Notice the event line (starting with on ) requires different syntax to the getAttrs and every other line, complicating your approach. Also when doing toggles between 1 and 0, its best to convert them into numbers so you can do a simple 1-value operation to do the toggle.

GiGs said: Buttons, and all attributes inside a repeating section, need to have the a name that includes the repeating section name when using them in a sheet worker. Sometimes they need a row id as well, but you dont need that here. Here's code that works for that specific button (whatever row its on). on(`clicked: repeating_skills :showslv`, function() { &nbsp; &nbsp; getAttrs(['repeating_skills_showslv-flag'], function(v) { &nbsp; &nbsp; &nbsp; &nbsp; const flag = +v['repeating_skills_showslv -flag '] || 0; &nbsp; &nbsp; &nbsp; &nbsp; const toggle = 1 - flag; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ['repeating_skills_showslv -flag ']: toggle &nbsp; &nbsp; &nbsp; &nbsp;}); &nbsp; &nbsp; }); }); Notice the event line (starting with on ) requires different syntax to the getAttrs and every other line, complicating your approach. Also when doing toggles between 1 and 0, its best to convert them into numbers so you can do a simple 1-value operation to do the toggle. Thanks for the quick response. Still not working for me. I cut and pasted the code you provided (made no other changes to HTML or CSS). The attribute is no longer updating in the attributes tab and the "X" still not showing up.&nbsp; I posted a snippet of the HTML before, but just in case I'm missing something, here is whole section with a screenshot for your reference. &lt;!-- Attributes and Powers --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="powers-and-attributes-area"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="pos skills-area"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="skills-background"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src="<a href="https://i.imgur.com/7WBpgm8.png" rel="nofollow">https://i.imgur.com/7WBpgm8.png</a>" alt="skills-label-img"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="characteristics-label-format skills-area-label"&gt;SKILLS&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Skills Column headers --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-5colrow"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="roll"&gt;Roll&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="slv"&gt;SLV&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="skill-name"&gt;Skill Name&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="skill-value"&gt;Value&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;Modifier&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- repeating skills section --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;fieldset class="repeating_skills"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="heroD6" type="roll" name="roll_skill" value="/em uses @{skillname}, and rolls [[3d6]]"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="hidden" class="toggle" name="attr_showslv-flag"/&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="slv-toggle-container"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_showslv" class="toggle"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="slv-checked"&gt;X&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class="skill-name-format" type="text" name="attr_skillName" value=""/&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="skill-dropdown-format" name="attr_skillValue"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="0" selected="selected"&gt;&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="1"&gt;DEX&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="2"&gt;INT&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="3"&gt;PRE&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="8"&gt;&amp;nbsp;8-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="10"&gt;10-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="11"&gt;11-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="12"&gt;12-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="13"&gt;13-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="14"&gt;14-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="15"&gt;15-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="16"&gt;16-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="17"&gt;17-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="18"&gt;18-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="19"&gt;19-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="20"&gt;20-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="21"&gt;21-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="22"&gt;22-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="23"&gt;23-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="24"&gt;24-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="25"&gt;25-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="skill-dropdown-format" name="attr_skillMod"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"-5"&gt;-5&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"-4"&gt;-4&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"-3"&gt;-3&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"-2"&gt;-2&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"-1"&gt;-1&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"0" selected="selected"&gt;0&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"1"&gt;+1&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"2"&gt;+2&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"3"&gt;+3&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"4"&gt;+4&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value"5"&gt;+5&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;

So, you're first set of code Kruxader was reacting to the button as if it was a non repeating button and you were setting a non repeating button. GiGs code reacts to the button as a repeating section element and allows you to set the repeating attribute easily. Repeating attributes do not show up in the attributes and abilities tab (and really the A&amp;A tab should be ignored when developing character sheets). For this use case, I'm wondering why you don't just use a regular checkbox instead of using an action button to make a pseudo checkbox. Using the straight checkbox will likely be better from an accessibility standpoint, and will be a lot less code: HTML &lt;fieldset class="repeating_skills"&gt; &lt;span&gt; &lt;button class="heroD6" type="roll" name="roll_skill" value="/em uses @{skillname}, and rolls [[3d6]]"&gt;&lt;/button&gt; &lt;/span&gt; &lt;input type="hidden" class="toggle" name="attr_showslv-flag"/&gt; &lt;div class="slv-toggle-container"&gt; &lt;input type="checkbox" name="attr_showslv" class="custom-checkbox"&gt; &lt;/div&gt; &lt;/fieldset&gt; CSS .custom-checkbox{ /*disable the normal checkbox appearance*/ -webkit-appearance:none; appearance:none; /*Setup what our default styling should be*/ border:1px solid black; border-radius:5px; width:20px; height:20px; display:grid; grid-template-areas:"content"; } .custom-checkbox:checked:before{ content:'X'; } As a side note, code should be posted in a code block. It makes it easier to read and parse.

Thanks Scott. I'll try using a regular checkbox. I'd read in the wiki somewhere where checkboxes weren't recommended for repeating sections. I wish I could find it again. But if there's no issue, I'll try your suggestion. Thanks for the code block tip...noob me.&nbsp;

Hmm, shouldn't be any issue with using checkboxes. Radios need some fiddling if you're trying to set up a situation where you want to select one row in a repeating section and have the radios function across rows, but otherwise they work just fine. And, you're welcome for the tip. The formatting options are a little hidden, so it's not immediately obvious.

Scott, Thank you. Worked perfectly!&nbsp;