[HELP] Default Values (Checkboxes)

So...I'm working on allow core skills to be renamed on the sheet.  I can't just use a repeating section (though that's there, too), because I want to allow people to select the skill they should use for different weapon attacks.  So, I need a list of predefined skills they can select from to perform an Attack + Damage roll at one time.  And, as far as I know, I can't add additional skills to the drop down as new skills are added, because I can't affect the DOM. So, I'm using named spans to accomplish this (and because <SELECT>s can't be configured this way (which is really annoying), I had to go with a faux drop down menu using radio/checkboxes and CSS. The problem is, the inputs that are supposed to be checked by default, aren't and I'm not sure why. I'm hoping someone here might be able to point out what's wrong... Sheet Workers are used to update the labels for the skills as they are changed.  This also means I need to use sheet workers when a new weapon or spell is added, because I can't draw up on the named span from outside of the repeating section.  I'm including the sheet workers for full disclosure of everything that's going on... Sheet Workers: function setSkillDropdown(section, field, value, rowid) { let repsection = `repeating_${section}`; let setskill = {}; if(Array.isArray(field) && value === "get names") { //is Array console.log("Field array: " + field); repsection += `_${rowid}_`; console.log("!!! Passed an Array !!!"); getAttrs(field, function(v) { let setfield; let fieldprefix; let setvalue; if (section === "weapons") {fieldprefix = "r";} else {fieldprefix = "s";} for (let a = 0; a < field.length; a++) { console.log("iii section ID: " + rowid + " iii"); setfield = repsection + fieldprefix + field[a]; setvalue = v[field[a]]; console.log(`iii setfield: ${setfield} iii`); console.log(`iii setvalue: ${setvalue} iii`); setskill[setfield] = setvalue; } let defaultval = field[0].split('name'); if (section === "weapons") { setfield = repsection + "weaponskill"; } else { setfield = repsection + "spellskill"; } setskill[setfield] = defaultval; console.log("Setting: " + JSON.stringify(setskill)); setAttrs(setskill); }); } else { console.log("iii passed a single field, so need to update that single field iii"); getSectionIDs(repsection, function(idArray) { //passing in a single field for (let i = 0; i < idArray.length; i++) { console.log(`${repsection}_${idArray[i]}_${field}: ${value}`); setskill[`${repsection}_${idArray[i]}_${field}`] = value; } setAttrs(setskill); }); } } const weaponsskilllist = ["fighting","athletics","shooting","throwing"]; weaponsskilllist.forEach(weaponsskilllist => { on(`change:${weaponsskilllist}name`, function(eventInfo) { console.log("Triggering Attribute: " + eventInfo.sourceAttribute); let field = "r" + eventInfo.sourceAttribute; let value = eventInfo.newValue; setSkillDropdown("weapons", field, value); }); }); const spellskilllist = ["faith","athletics","focus","performance","psionics","ritual","spellcasting","weirdscience"]; spellskilllist.forEach(spellskilllist => { on(`change:${spellskilllist}name`, function(eventInfo) { console.log("Triggering Attribute: " + eventInfo.sourceAttribute); let field = "s" + eventInfo.sourceAttribute; let value = eventInfo.newValue; setSkillDropdown("spells", field, value); }); }); const weaponsskillnamelist = ["fightingname","athleticsname","shootingname","throwingname"]; const spellskillnamelist = ["faithname","athleticsname","focusname","performancename","psionicsname","ritualname","spellcastingname","weirdsciencename"]; on("change:repeating_spells:spellbutton change:repeating_weapons:weaponbutton", function(eventInfo) { console.log("iii sourceAttribute: " + eventInfo.sourceAttribute + " iii"); let parts = eventInfo.sourceAttribute.split('_'); let field, value; if (parts[1] === "weapons") { field = weaponsskillnamelist; } else { field = spellskillnamelist; } if (eventInfo.newValue === "2" || eventInfo.newValue === "0") { console.log("Make sure the drop down is populated with skill names"); setSkillDropdown(parts[1], field, "get names", parts[2]); } else { console.log("No need to update anything..."); } }); HTML : <div class="sheet-container"> <div class="sheet-child"> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-fighting" name="attr_weaponskill" value="fighting" checked="checked" /> <span name='attr_rfightingname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-athletics" name="attr_weaponskill" value="athletics" /> <span name='attr_rathleticsname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-shooting" name="attr_weaponskill" value="shooting" /> <span name='attr_rshootingname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-throwing" name="attr_weaponskill" value="throwing" /> <span name='attr_rthrowingname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-unskilled" name="attr_weaponskill" value="unskilled" /> <span data-i18n='unskilled'>Unskilled</span></label> <input type="checkbox" class="sheet-select-radio sheet-fighting" name="attr_weaponskill" value="fighting" checked="checked" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-athletics" name="attr_weaponskill" value="athletics" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-shooting" name="attr_weaponskill" value="shooting" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-throwing" name="attr_weaponskill" value="throwing" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-unskilled" name="attr_weaponskill" value="unskilled" style='display:none;' /> <div class="sheet-fighting"><span name='attr_rfightingname'></span></div> <div class="sheet-athletics"><span name='attr_rathleticsname'></span></div> <div class="sheet-shooting"><span name='attr_rshootingname'></span></div> <div class="sheet-throwing"><span name='attr_rthrowingname'></span></div> <div class="sheet-unskilled"><span data-i18n='unskilled'>Unskilled</span></div> </div> </div> <div class="sheet-container"> <div class="sheet-child"> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-athletics" name="attr_spellskill" value="athletics" /> <span name='attr_sathleticsname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-faith" name="attr_spellskill" value="faith" checked="checked" /> <span name='attr_sfaithname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-focus" name="attr_spellskill" value="focus" /> <span name='attr_sfocusname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-performance" name="attr_spellskill" value="performance" /> <span name='attr_sperformancename'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-psionics" name="attr_spellskill" value="psionics" /> <span name='attr_spsionicsname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-ritual" name="attr_spellskill" value="ritual" /> <span name='attr_sritualname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-spellcasting" name="attr_spellskill" value="spellcasting" /> <span name='attr_sspellcastingname'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-weirdscience" name="attr_spellskill" value="weirdscience" /> <span name='attr_sweirdsciencename'></span></label> <label class="sheet-ddmenu"><input type="checkbox" class="sheet-select-radio sheet-unskilled" name="attr_spellskill" value="unskilled" /> <span data-i18n='unskilled'>Unskilled</span></label> <input type="checkbox" class="sheet-select-radio sheet-athletics" name="attr_spellskill" value="athletics" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-faith" name="attr_spellskill" value="faith" checked="checked" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-focus" name="attr_spellskill" value="focus" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-performance" name="attr_spellskill" value="performance" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-psionics" name="attr_spellskill" value="psionics" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-ritual" name="attr_spellskill" value="ritual" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-spellcasting" name="attr_spellskill" value="spellcasting" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-weirdscience" name="attr_spellskill" value="weirdscience" style='display:none;' /> <input type="checkbox" class="sheet-select-radio sheet-unskilled" name="attr_spellskill" value="unskilled" style='display:none;' /> <div class="sheet-athletics"><span name='attr_sathleticsname'></span></div> <div class="sheet-faith"><span name='attr_sfaithname'></span></div> <div class="sheet-focus"><span name='attr_sfocusname'></span></div> <div class="sheet-performance"><span name='attr_sperformancename'></span></div> <div class="sheet-psionics"><span name='attr_spsionicsname'></span></div> <div class="sheet-ritual"><span name='attr_sritualname'></span></div> <div class="sheet-spellcasting"><span name='attr_sspellcastingname'></span></div> <div class="sheet-weirdscience"><span name='attr_sweirdsciencename'></span></div> <div class="sheet-unskilled"><span data-i18n='unskilled'>Unskilled</span></div> </div> </div> CSS : .sheet-container {     width: 100px;     border-bottom: 1px solid black; } .sheet-container, .sheet-child {     display: inline-block; } .sheet-child {     vertical-align: middle;     width: 100px;     height: 28px; } .sheet-child label {     display: none;     z-index: 1; } .sheet-ddmenu {     font-weight: normal;     font-size: 1em;     width: 95%; } .sheet-child:hover {     border-radius: 10px;     background: silver;     /*background: rgba(117,121,127,1);*/     position:absolute;     width: 100px;     margin-top: -14px;     height: auto;     z-index: 1;     padding: 5px; } sheet-child:hover label {     display: inline; } .sheet-child:hover label {     display: inline-block; } div.sheet-fighting, div.sheet-athletics, div.sheet-shooting, div.sheet-throwing, div.sheet-unskilled, div.sheet-faith, div.sheet-focus, div.sheet-performance, div.sheet-psionics, div.sheet-ritual, div.sheet-spellcasting, div.sheet-weirdscience {     width: 100px;     height: 28px;     line-height:28px;     color: black;     border-bottom: 1px solid black;     text-align: center;     display: none; } .sheet-child:not(:hover) input.sheet-select-radio.sheet-fighting:checked ~ div.sheet-fighting, .sheet-child:not(:hover) input.sheet-select-radio.sheet-athletics:checked ~ div.sheet-athletics, .sheet-child:not(:hover) input.sheet-select-radio.sheet-shooting:checked ~ div.sheet-shooting, .sheet-child:not(:hover) input.sheet-select-radio.sheet-throwing:checked ~ div.sheet-throwing, .sheet-child:not(:hover) input.sheet-select-radio.sheet-unskilled:checked ~ div.sheet-unskilled, .sheet-child:not(:hover) input.sheet-select-radio.sheet-faith:checked ~ div.sheet-faith, .sheet-child:not(:hover) input.sheet-select-radio.sheet-focus:checked ~ div.sheet-focus, .sheet-child:not(:hover) input.sheet-select-radio.sheet-performance:checked ~ div.sheet-performance, .sheet-child:not(:hover) input.sheet-select-radio.sheet-psionics:checked ~ div.sheet-psionics, .sheet-child:not(:hover) input.sheet-select-radio.sheet-ritual:checked ~ div.sheet-ritual, .sheet-child:not(:hover) input.sheet-select-radio.sheet-spellcasting:checked ~ div.sheet-spellcasting, .sheet-child:not(:hover) input.sheet-select-radio.sheet-weirdscience:checked ~ div.sheet-weirdscience {     display: block; } label.sheet-ddmenu:hover {     background-color: orange; } So...any ideas what I'm doing wrong so the defaults are checked?  I even tried using the sheet worker above to select the option by default when the stuff is being updated, and no dice there, either.  I don't really want to use the sheet worker to do that, but...right now I'm just hoping to have something selected by default.

How do you know it isn't checked?

When I hover over it, none of them are checked and the div that should be visible isn't visible until I actually click on something. EDIT: Here's something (hopefully) that shows what I'm talking about...may need to click it to see

Well, the html you've got there is certainly correct. What about the html for the div control? Is it before or after the html in your post? Are the check boxes there marked as checked?

Scott C. said: What about the html for the div control? Is it before or after the html in your post?  Sorry...I don't understand the question.  What do you mean by div control? Scott C. said: Are the check boxes there marked as checked? Yep...and that's the part that has me confused. :(

As a quick test, I noticed the default value for weaponskill was "0", but I removed the label wrapper and the checked value for weaponskill was correct.  Seems that I recall an issue we had on the pathfinder sheet with our sheet navigation tabs when we wrapped them in labels.  Might be similar.  Not sure.

Vince said: As a quick test, I noticed the default value for weaponskill was "0", but I removed the label wrapper the checked value for weaponskill was correct.  Seems that I recall an issue we had on the pathfinder sheet with our sheet navigation tabs when we wrapped them in labels.  Might be similar.  Not sure. Funny...I was just googling to see if the label wrap might be the problem... :-/

Oh, I know what your problem is. You've got them as check boxes with each one having a different value. Check boxes don't work that way. You need to make them radios. However, then they won't propagate to the radio button that you'll have controlling the display of the div. To fix that, switch the instance that is controlling the div display to a type='hidden' and use css selectors to change its effect based on its value. On mobile at the moment. Let me know if that made any sense.

I'll give it a try and let you know, but I've used this method in other areas without a problem.