
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';}}
.sheet-display-none {display: none;}
I think there should be an easier way of doing this...
TIA!!!