Aquí, tengo tres grupos de radio en una sola página. Pero en toda la página quiero seleccionar solo una opción de radio. Por ejemplo, si estoy seleccionando el lunes, la selección del martes debería estar desmarcada automáticamente. ¿Cómo puedo proceder con la lógica? La siguiente lógica no funciona como se esperaba.
ejemplo JSON:
{ report:[ { day:'Monday', slot:[ '9-10am', '10-11am', '11-12am' ] },{ day:'Tuesday', slot:[ '9-10am', '10-11am', '11-12am' ] },{ day:'Wednesday', slot:[ '9-10am', '10-11am', '11-12am' ] } ]}codigo js
for(var I=0; I<reports.length; I++){ var radios = document.getElementsByTagName('input') if(radios[I].type === 'radio' && radios[I].checked){ document.getElementById(radios[I].id).checked = false }Puede dar a todos estos botones de radio el mismo nombre, luego solo se verificará una radio.
Si puede crear botones de radio en SurveyJS, debería poder dar un nombre al grupo de botones, por lo que no sería necesario ningún JavaScript adicional. Consulte su documentación para ver un ejemplo.
Parece que el tipo de estructura anidada que tiene para los botones podría lograrse con algo como un panel dinámico o condiciones en cascada en SurveyJS. Debería poder representar los intervalos de tiempo disponibles dinámicamente con "visibleIf" en función del día seleccionado.
Definitivamente buscaría en la documentación de SurveyJS para encontrar una solución allí en lugar de piratearla. Pero solo como ejercicio, el problema en su código actual podría ser que está seleccionando un botón por ID, lo que no funcionará correctamente si ha intentado dar la misma ID a varios botones. Después de todo, ya tiene el botón de destino como radios[I] , por lo que podría usar radios[I].checked = false . O el problema podría ser que está desmarcando el botón seleccionado DESPUÉS de que se haya realizado la nueva selección, lo que en realidad podría desmarcar el botón en el que acaba de hacer clic. Difícil de decir sin información adicional, pero en cualquier caso, hacer un bucle de sus entradas en función de un valor que podría ser algo más que la cantidad real de entradas (está usando reports.length . longitud) probablemente no sea la mejor idea, ya que ese valor podría ser diferente de la cantidad de entradas en su formulario, lo que significaría que no todas ellas están incluidas en el bucle. Aquí hay un par de ejemplos de lo que podrías hacer en su lugar:
// Get all radio buttons const radioButtons = document.querySelectorAll('input[type="radio"]') // If you need to uncheck the previously selected one (don't do this if you can avoid it!) radioButtons.forEach(radioButton => { // Use a mousedown event instead of click // This gives you time to uncheck the previous one before the new one gets checked radioButton.addEventListener('mousedown', () => { // Get the currently selected button and uncheck it const currentlySelected = document.querySelector('input[type="radio"]:checked') if (currentlySelected) currentlySelected.checked = false }) }) // You can add further options to the querySelector, such as [name] // This gets the currently selected button in the specified group const checkedRadioButton = document.querySelector('input[type="radio"][name="group-name"]:checked')Aquí hay un violín que demuestra este tipo de funcionalidad de botón de radio "falso" (sin un atributo de "nombre").