Logré la primera parte de la pregunta usando php o js. Utilizo php para hacer eco del atributo verificado. El problema aquí es que las entradas de radio tienen otras entradas que se vuelven visibles al seleccionarlas con un evento de cambio. Sin embargo, si alguna de las radios se selecciona / marca de forma predeterminada, las entradas condicionales no se muestran hasta que cambie las selecciones de radio. De ahí la pregunta, ¿cómo puedo hacer que se verifique de forma predeterminada y todavía se muestran las respectivas entradas condicionales?

<input  name="mode" id="single" onchange="conditionalDisplay(this.value)"  type="radio"  value="single" <?php if($mode == single){echo 'checked';}>
<input name="mode" id="multi" onchange="conditionalDisplay(this.value)" type="radio"  value="multi" <?php if($mode == multi){echo 'checked';}> 

Cuando se selecciona <×single, otras entradas se vuelven visibles. Lo mismo ocurre con las < . Si la condición especificada en el código php es verdadera, entonces uno de ellos se selecciona / verifica de forma predeterminada, pero las entradas ocultas adjuntas de la función onchange no se muestran hasta que se cambia la selección.

N: B: el valor de <”$mode se recupera de una base de datos.

0
Samuel Jones 30 ago. 2020 a las 08:45

1 respuesta

La mejor respuesta

Puede activar onchange mediante programación, por ejemplo, con element.onchange();.

function conditionalDisplay(value) {
  // Let's for example log to browser console
  console.log('Do something useful with ' + value);
}

// When DOM is ready, trigger an `onchange` event
document.addEventListener('DOMContentLoaded', function() {
  var singleElement = document.getElementById('single');
  var multiElement = document.getElementById('multi');
  
  // Test which exactly element is checked
  console.log(`singleElement.checked: ${singleElement.checked}`);
  console.log(`multiElement.checked: ${multiElement.checked}`);
  
  if (singleElement.checked == true) {
    singleElement.onchange();
  } else {
    multiElement.onchange();
  } 
});
<input name="mode" id="single" onchange="conditionalDisplay(this.value)" type="radio" value="single">

<input name="mode" id="multi" onchange="conditionalDisplay(this.value)" type="radio" value="multi" checked>

Este también podría serle útil ¿Cómo puedo activar un evento onchange? manualmente?

0
Ihor Vyspiansky 30 ago. 2020 a las 09:13