Buttons not deselecting after reclick
So I found out that the way I wanted to do this was actually not possible at all so I had to completely redo it to this technique without CSS. Deselecting even with radios was pretty awkward too as they aren't really designed to be deselected either except for work arounds like this one.
function deselectRadio(rootElement) {
if (!rootElement) rootElement = document;
if (!window.radioChecked) window.radioChecked = {};
window.radioClick = function(e) {
const obj = e.target,
name = obj.name || "unnamed";
if (e.keyCode) return obj.checked = e.keyCode != 32;
obj.checked = window.radioChecked[name] != obj;
window.radioChecked[name] = obj.checked ? obj : null;
}
rootElement.querySelectorAll("input[type='radio']").forEach(radio => {
radio.setAttribute("onclick", "radioClick(event)");
radio.setAttribute("onkeyup", "radioClick(event)");
});
}
deselectRadio();<div id="buttonWrapper">
<input type="radio" name="tabRadio" id="radio1" />
<input type="radio" name="tabRadio" id="radio2" />
<input type="radio" name="tabRadio" id="radio3" />
<input type="radio" name="tabRadio" id="radio4" />
<input type="radio" name="tabRadio" id="radio5" />
</div>