Checkbox within Fieldset not working

Hello, I have a repeating field, but I want a checkbox which can toggle what is displayed for each repeating field. This is my current HTML (Fieldset is at the bottom, including the whole section to understand parenting): <div class="sheet-editship">   <div class="sheet-edit-ship sheet-green-color sheet-center">  <div class="sheet-ship sheet-block">       <span class="sheet-green-color sheet-center">Ship Design</span>       <img class="image-CSS" name="attr_image_url">       <input class="sheet-inputfield sheet-green-color" style="width: 250px; height: 28px" type="text" name="attr_image_url">     </div>   </div>   <div class="sheet-ship-drive sheet-block">     <span class="sheet-center sheet-block sheet-green-color">Ship Drive</span>                                   <select class="sheet-dropdown sheet-blue-color sheet-center" type="text" style="width: 100px;" name="attr_ship_drive">         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="Atmo Prop.">Atmo Prop.</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="Rockets">Rockets</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="Ion 1">Ion 1</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="Nuclear">Nuclear</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="Ion 2">Ion 2</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="EM Drive*">EM Drive*</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="EM Drive**">EM Drive**</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="Fusion">Fusion</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="EM Drive***">EM Drive***</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="Gravity Drive">Gravity Drive</option>         <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="0" Selected>None</option>               </select>                     <span class="sheet-center sheet-block sheet-blue-color">Bonus:</span>         <input class="sheet-inputfield52 sheet-silver-color" type="text" name="attr_ship_drive_bonus">       <span class="sheet-center sheet-block sheet-blue-color">Speed:</span>         <span class="sheet-silver-color" name="attr_ship_drive_speed"></span>       <span class="sheet-center sheet-block sheet-blue-color">Power:</span>         <input class="sheet-inputfield120 sheet-silver-color" type="text" name="attr_ship_drive_watts">       <span class="sheet-center sheet-block sheet-blue-color">Points:</span>         <input class="sheet-inputfield52 sheet-silver-color" type="text" name="attr_ship_drive_points">       <span class="sheet-center sheet-block sheet-blue-color">TL:</span>         <span class="sheet-inputfield52 sheet-silver-color" type="text" name="attr_ship_drive_tl"></span>         </div>   <div class="sheet-ship-equipment-section sheet-center">     <span class="sheet-blue-color sheet-center">Roll</span>     <span class="sheet-blue-color sheet-center">Equipment</span>     <span class="sheet-blue-color sheet-center">Attribute</span>     <span class="sheet-blue-color sheet-center">Attr+</span>     <span class="sheet-blue-color sheet-center">Drive</span>     <span class="sheet-blue-color sheet-center">Property</span>     <span class="sheet-blue-color sheet-center">ROLL</span>     <span class="sheet-blue-color sheet-center">ROLL</span>     <span class="sheet-blue-color sheet-center">ROLL</span>     <span class="sheet-blue-color sheet-center">ROLL</span>   </div>      <fieldset class="repeating_shipequipment">     <div class="sheet-option-selector sheet-blue-color sheet-center">         <input type="checkbox" class="sheet-toggle-equipment" name="attr_toggle_equipment" onchange="toggleEquipment(this)" /> Toggle Equipment/Weapon     </div>         <div class="sheet-weapon-container">         <div class="sheet-weapon-section sheet-blue-color sheet-center">             <b class="sheet-pink-color"> WEAPON TEST</b>           </div>     </div>         <div class="sheet-equipment-container" style="display:none;">         <div class="sheet-equipment-section sheet-blue-color sheet-center">             <span class="sheet-pink-color"> EQUIPMENT TEST </span>         </div>     </div>   </fieldset> </div>         Javascript: function toggleEquipment(checkboxElement) {   const weaponContainer = checkboxElement.closest('fieldset').querySelector('.sheet-weapon-container');   const equipmentContainer = checkboxElement.closest('fieldset').querySelector('.sheet-equipment-container');     if(checkboxElement.checked) {     weaponContainer.style.display = 'none';     equipmentContainer.style.display = 'block';   } else {     weaponContainer.style.display = 'block';     equipmentContainer.style.display = 'none';   } }    CSS For this whole Section: .sheet-display-none {   display: none; } I think there should be an easier way of doing this... TIA!!!

It looks like you are trying to use Jquery - generally speaking, don't bother with that. If I understand your goal, you can do this with a roll20 checkbox and CSS - no need for any javascript or jquery. Your copde probably has an attack of divitis too (too many divs). Can you describe what specifically you want to happen when the checkbox is checked, and what is the state of all items when the checkbox is not checked?

When a new fieldset is added, a checkbox is displayed. All the fields for a weapon are there. But if the box is checked, the div that is being displayed is replaced with another div with different headers and fields. I want to add either weapon or equipment, but each type has different modifiers and names. Basically, it's asking: Is this a weapon or equipment? If it's a weapon certain fields display. If it's equipment a totally different set of fields display. I'd prefer a radio button. A checkbox is smaller in terms of space, and a drop-down would be okay if a checkbox or radio isn't feasible. 

This is the fieldset  <fieldset class="repeating_shipequipment">             <input type="radio" name="attr_equipment_type" value="ship_weapon" class="sheet-equipment-type" checked/> Weapon             <input type="radio" name="attr_equipment_type" value="ship_equipment" class="sheet-equipment-type"/> Equipment         <div class="sheet-ship_weapon-container sheet-visible">                 <b class="sheet-pink-color"> WEAPON TEST</b>                 <!-- Add your Ship Weapon specific HTML here -->         </div>         <div class="sheet-ship-equipment-container sheet-hidden">                 <b class="sheet-pink-color"> TESTING </b>                 <!-- Add your Ship Equipment specific HTML here -->                 <!-- The rest of your inputs and selects go here -->         </div>         <!-- Rest of your existing fields here -->     </fieldset> CSS: .sheet-hidden { display: none !important; } .sheet-visible { display: block !important; /*or 'grid' or 'flex' based on your layout needs */ }    

Is that why there are two divs there? one which is visible if its a weapon, and the other is visible if it's equipment? This easily solved. You can do it as a radio button, just set values to 0 and 1. But I've done it as a checkbox here. The HTML will look something like this - notice the reduction in number of classes. The checkbox (or radio button) needs a single class.  <fieldset class="repeating_shipequipment"> < input type= "checkbox" name= "attr_type" value= "1" checked >         < input type= "hidden" name= "attr_itemtype" value= "1" class= "sheet-type" >         <div class="sheet-weapon">                 <b class="sheet-pink-color"> WEAPON TEST</b>                 <!-- Add your Ship Weapon specific HTML here -->         </div>         <div class="sheet-equipment">                 <b class="sheet-pink-color"> TESTING </b>                 <!-- Add your Ship Equipment specific HTML here -->                 <!-- The rest of your inputs and selects go here -->         </div>         <!-- Rest of your existing fields here -->     </fieldset> The CSS would then look something like this: .sheet-weapon, .sheet-equipment { display: none; } .sheet-type[value="1"] ~ .sheet-weapon, .sheet-type[value="0"] ~ .sheet-equipment { display: block; } We set both divs to hidden by default.  But then the value of the checkbox is used to set the relevant one of them to visible. Another way to do this avoids the default, using the not operator: .sheet-type:not([value="1"]) ~ .sheet-weapon, .sheet-type:not([value="0"]) ~ .sheet-equipment { display: none; } This uses less code, and specifically hides the one we aren't using. You don't need to use !important to make this work. I've shortened many class names, but that's just for aesthetics. You can keep using the long names-  just make sure the correct names are used in CSS and HTML.

Okay, so if I use the first CSS you have here, the longer one, nothing displays. No matter if it's checked or not. The shorter CSS, the last one, displays both divs, no matter if it's checked or not. HOWEVER, both CSS options display the checkbox. First CSS: Second CSS:

ChatGPT told me to do it this way. I put in your code and it made a couple changes. <fieldset class="repeating_shipequipment">     <input type="radio" name="attr_type" value="1" class="sheet-type" checked>     <input type="radio" name="attr_type" value="0" class="sheet-type">     <div class="sheet-weapon">         <b class="sheet-pink-color"> WEAPON TEST</b>     </div>     <div class="sheet-equipment">         <b class="sheet-pink-color"> TESTING </b>     </div> </fieldset> .sheet-weapon, .sheet-equipment { display: none; } /* Updated the selector to be correct */ .sheet-type:checked[value="1"] ~ .sheet-weapon, .sheet-type:checked[value="0"] ~ .sheet-equipment { display: flex; /* Updated from flexbox to flex */ /* Other styles remain the same */ }

I had two errors in the original code. First, I had .sheet-type[value="1"] ~ sheet-weapon, .sheet-type[value="0"] ~ sheet-equipment instead of .sheet-type[value="1"] ~ .sheet-weapon, .sheet-type[value="0"] ~ .sheet-equipment Note the missing periods. Second, sometimes in roll20, you need to use a type="hidden" input, and its that which roll20 monitors for changes. So the original HTML code works like this:   < fieldset class= "repeating_shipequipment" >         < input type= "checkbox" name= "attr_type" value= "1" checked >         < input type= "hidden" name= "attr_type" value= "1" class= "sheet-type" >         < div class= "sheet-weapon" >                 < b class= "sheet-pink-color" > WEAPON TEST </ b >                 <!-- Add your Ship Weapon specific HTML here -->         </ div >         < div class= "sheet-equipment" >                 < b class= "sheet-pink-color" > TESTING </ b >                 <!-- Add your Ship Equipment specific HTML here -->                 <!-- The rest of your inputs and selects go here -->         </ div >         <!-- Rest of your existing fields here -->     </ fieldset > Notice the copy of the checkbox, an input with the same name but type=hidden, and that's the one the important class is added to. Hidden inputs are special in roll20, sometimes you have to use them. I've gone back and corrected the original code to avoid confusion.

Regarding your chatgpt cpde - I'm happy it got you to a working copy, but chatGPT will often lead you astray when it comes to Roll20. ChatGPT is only as as good as the code other people have put into it, and roll20 has enough special conditions and small enough user base that ChatGPT will usually be useless. It's nice that it produced something that worked here, but don't rely on it.

Yeah, I usually use ChatGPT on code that I provide and have it specifically look for syntax errors with a specification that this applies to "roll20.net". I don't have it do full creative code, because it usually fails, like you say. But it can be helpful for missing the commas and periods, like a proofreader. Or if there is a huge section that you want to remove style=" ***** ". Finding variables using string searches in my editor I tend to forget the symbols for. But CHatGPT doesn't forget, lol.  So it's more of a tool than a creator. :) Thanks for the help! I couldn't have gotten it to work without getting your code!!! a simple period is fixable. What I had was a problem, and you solved it! ChatGPT just helped find the missing period ;P