Tener un solo botón seleccionado a la vez funciona como se supone que debe hacerlo, pero cuando se hace clic en un botón, no se anula la selección cuando se vuelve a hacer clic.
Siento que la solución a esto es muy simple, pero no puedo resolverlo.
<div id="buttonWrapper"> <button class="buttonArray"></button> <button class="buttonArray"></button> <button class="buttonArray"></button> <button class="buttonArray"></button> <button class="buttonArray"></button> </div> <script type="text/javascript"> const buttonElement = document.getElementById('buttonWrapper'); buttonElement.addEventListener('click', function (e) { document.querySelectorAll('#buttonWrapper button').forEach(function (el) { el.className = "buttonArray";}); if (e.target.className === "buttonArray") { e.target.className = "buttonSelect"; } else { e.target.className = "buttonArray"; } });https://jsfiddle.net/cg6n5ahd/
¿Cuál es la forma más fácil de resolver esto con mi código? Gracias por adelantado.
Así que descubrí que la forma en que quería hacer esto en realidad no era posible en absoluto, así que tuve que rehacerlo completamente con esta técnica sin CSS. Deseleccionar incluso con radios también fue bastante incómodo, ya que tampoco están diseñados para ser deseleccionados, excepto para soluciones como esta.
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> const buttonElement = document.getElementById('buttonWrapper'); buttonElement.addEventListener('click', function(e) { document.querySelectorAll('#buttonWrapper button').forEach(function(el) { e.target.className = e.target.className == 'buttonArray' ? 'buttonSelect' : 'buttonArray'; }); }); body { color: #000; background: #eee; } .buttonArray { border-color: darkgray; border-style: solid; border-radius: 10px; padding: 10px; } .buttonArray:hover { border-color: #a0a0a0; background-color: #dbdbdb; } .buttonSelect { border-color: goldenrod; background-color: gold; border-style: solid; border-radius: 10px; padding: 10px; } #buttonWrapper { flex-direction: row; padding: 10px; top: 1rem; left: 0%; width: 100%; float: left; box-sizing: border-box; text-align: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; z-index: 1; background: transparent; } <div id="buttonWrapper"> <button class="buttonArray"></button> <button class="buttonArray"></button> <button class="buttonArray"></button> <button class="buttonArray"></button> <button class="buttonArray"></button> </div>