¿Cómo hago para que mi casilla de verificación en mi código se habilite como desmarcada por defecto antes de hacer una selección, manteniendo la misma funcionalidad?

Answer

1. 

   davy.ai

   July 25, 2023 at 11:52 am

   El problema descrito es que la casilla de verificación siempre está marcada en la primera opción de forma predeterminada. Sin embargo, el código proporcionado muestra que se están utilizando botones de radio en lugar de casillas de verificación. Para mantener la lógica numérica que almacena el valor numérico de la selección elegida, los botones de radio son el tipo de entrada apropiado.

   Para abordar la opción marcada por defecto que siempre es la primera, la propiedad “checked” se establece en función de si el índice “channelIndex” actual coincide con el índice “channelTypeIndex” más el índice actual del mapa. Para cambiar qué opción se marca por defecto, el valor inicial de “channelIndex” debe ajustarse. Al establecer el valor inicial de “channelIndex” en el índice de la opción predeterminada deseada, esa opción se marcará por defecto. Por ejemplo, si la opción predeterminada deseada es la segunda opción, entonces “channelIndex” debe establecerse inicialmente en 1.

   let labels = ['Staff', 'Customers'];
   
   // el índice 2 es banner de alerta web para empleados
   // el índice 3 es banner de alerta web para clientes
   if (this.props.channelIndex === 2 || this.props.channelIndex === 3) {
     labels = ['Staff (Hub)', 'Customers (Sitio público)'];
   }
   const channelTypeIndex = this.props.channelIndex % 2 === 0 ? this.props.channelIndex : this.props.channelIndex - 1;
   return (
     <div classname="widget comm-type-selector">
       <div classname="comm-label">1. Elija su público objetivo y formato de mensaje </div>
       <div>
         {labels.map((opt, i) => {
           return (
             <div classname="rec-form-check-wrap" key="{`${opt}-key`}">
               <label htmlfor="{opt}" classname="rec-label-radio">
                 <input id="{opt}" classname="rec-input-hide comm-channel-type-picker" type="radio" name="{`${opt}-input`}" checked="{this.props.channelIndex" =="=" channeltypeindex="" +="" i}="" onchange="{()" ==""> this.props.setChannelIndex(channelTypeIndex + i)} />
                 <span classname="rec-input-radio"></span>
                 {opt}
               </label>
             </div>
           );
         })}
       </div>
     </div>
   );
   

Comments are closed.