Escribí un html con 3 botones de radio. Cada botón de opción está contenido en un contenedor div. Me gustaría que si se marca un botón de opción, el fondo del contenedor div que contiene el botón de opción marcado debería volverse azul, y el fondo del div que contiene los otros botones de opción sin marcar debería ser blanco. Traté de lograr eso con javascript y css, pero no funciona. ¿Podría alguien por favor ayudarme a escribir correctamente este javascript?.
<!DOCTYPE html> <html> <style> .stylingForCheckedRadioButton { color: white; background-color: blue; border-style: solid; border-width: thin; border-color: grey; margin-bottom: 7px; width: 10%; height: 50px; border-radius: 6px; } .stylingForUnCheckedRadioButton { color: black; background-color: white; border-style: groove; border-width: thin; border-color: #DCDCDC; margin-bottom: 7px; width: 10%; height: 50px; border-radius: 6px; } </style> <script type="text/javascript"> function checkValue(containerId) { const rbs = document.querySelectorAll('input[name = "radiobutton"]'); let selectedValue; for (const rb of rbs) { if (rb.checked) { document.getElementById(containerId).style = "stylingForCheckedRadioButton"; }else{ document.getElementById(containerId).style = "stylingForUnCheckedRadioButton"; } } }; </script> <body> <h1>My Radio Buttons</h1> <div class="stylingForUnCheckedRadioButton" id="container1"> <input id="radiobuttonId1" type="radio" value="radiobuttonId1" name="radiobutton" onclick="checkValue('container1')"> <label for="radiobuttonId1">Radio button 1</label> </div> <div class="stylingForUnCheckedRadioButton" id="container2"> <input id="radiobuttonId2" type="radio" value="radiobuttonId2" name="radiobutton" onclick="checkValue('container3')"> <label for="radiobuttonId2">Radio button 2</label> </div> <div class="stylingForUnCheckedRadioButton" id="container3"> <input id="radiobuttonId3" type="radio" value="radiobuttonId3" name="radiobutton" onclick="checkValue('container3')"> <label for="radiobuttonId3">Radio button 3</label> </div> </body> </html>Por aquí...
const all_Radios = document.querySelectorAll('#container input[type=radio]'); set_Radios() // for page initialization all_Radios.forEach( btRadio => btRadio.oninput = set_Radios ) function set_Radios() { all_Radios.forEach( bt => bt.closest('label').classList.toggle('checkedClass', bt.checked)) } #container > label { display : block; color : black; background-color : white; border-style : groove; border-width : thin; border-color : #DCDCDC; margin-bottom : 7px; width : 10%; height : 2em; border-radius : 6px; min-width : 10em; line-height : 2em; } #container > label.checkedClass { color : white; background-color : blue; border-style : solid; border-color : grey; } <h1>My Radio Buttons</h1> <div id="container"> <label> <input name="radiobutton" type="radio" value="xxx" > Radio button 1 </label> <label> <input name="radiobutton" type="radio" value="yyy" > Radio button 2 </label> <label> <input name="radiobutton" type="radio" value="zzz" > Radio button 3 </label> </div>Recomiendo leer algunos temas sobre DRY .
// All the radio buttons const radios = document.querySelectorAll('.radio') // Function to toggle active class function handleRadioClick(e) { // Remove previous active class for (let i = 0; i < radios.length; i++) { radios[i].parentNode.classList.remove('active') } // Add current active class to parent container e.target.parentNode.classList.add('active') } // Listen for the click event on radios for (let i = 0; i < radios.length; i++) { radios[i].addEventListener('click', handleRadioClick, false); } .container { color: black; background-color: white; border-style: groove; border-width: thin; border-color: #DCDCDC; margin-bottom: 7px; width: 10%; height: 50px; border-radius: 6px; } .container.active { color: white; background-color: blue; border-style: solid; border-width: thin; border-color: grey; margin-bottom: 7px; width: 10%; height: 50px; border-radius: 6px; } <div class="container"> <input class="radio" id="btn1" type="radio" value="btn1" name="radio"> <label for="btn1">Radio button 1</label> </div> <div class="container"> <input class="radio" id="btn2" type="radio" value="btn2" name="radio"> <label for="btn2">Radio button 2</label> </div> <div class="container"> <input class="radio" id="btn3" type="radio" value="btn3" name="radio"> <label for="btn3">Radio button 3</label> </div>Puede usar event.target para obtener el parentNode del elemento de entrada para establecer el estilo usando classList.replace() . Cada clic restablece las clases de los elementos principales a desmarcadas, luego, si event.target está marcada e.target.checked, reemplace la clase sin marcar con la clase marcada.
const rbs = document.querySelectorAll('input[name = "radiobutton"]'); // callback function setSel passing in the event from the listener function setSel(e) { // get parent element of the event target let par = e.target.parentNode // reset each input to unchecked before checking the event target rbs.forEach(item => item.parentNode.classList.replace('stylingForCheckedRadioButton', 'stylingForUnCheckedRadioButton')) // if the el is checked we replace the classList with // the desired class that styles as checked e.target.checked ? par.classList.replace('stylingForUnCheckedRadioButton', 'stylingForCheckedRadioButton') : null } // loop over the input nodeList and add event to each node // in the list with a callback function 'setSel' rbs.forEach(el => el.addEventListener('click', setSel)) .stylingForCheckedRadioButton { background-color: red; } <!DOCTYPE html> <html> <style> .stylingForCheckedRadioButton { color: white; background-color: blue; border-style: solid; border-width: thin; border-color: grey; margin-bottom: 7px; width: 10%; height: 50px; border-radius: 6px; } .stylingForUnCheckedRadioButton { color: black; background-color: white; border-style: groove; border-width: thin; border-color: #DCDCDC; margin-bottom: 7px; width: 10%; height: 50px; border-radius: 6px; } </style> <script type="text/javascript"> </script> <body> <h1>My Radio Buttons</h1> <div class="container stylingForUnCheckedRadioButton" id="container1"> <input id="radiobuttonId1" type="radio" value="radiobuttonId1" name="radiobutton"> <label for="radiobuttonId1">Radio button 1</label> </div> <div class="container stylingForUnCheckedRadioButton" id="container2"> <input id="radiobuttonId2" type="radio" value="radiobuttonId2" name="radiobutton"> <label for="radiobuttonId2">Radio button 2</label> </div> <div class="container stylingForUnCheckedRadioButton" id="container3"> <input id="radiobuttonId3" type="radio" value="radiobuttonId3" name="radiobutton"> <label for="radiobuttonId3">Radio button 3</label> </div> </body> </html>