Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

336
Vistas
If I click to the first radio btn the second box first value should highlighted. How is that possible?

I have two boxes, One contains radio btns and in another box I have some values. If I click to the first radio button. First column values should highlight.

My structure of design

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

i think you need to use data-* and check any check box value..

then , you can add specific class name like highlited for making special style..

let checkBoxs = document.getElementsByClassName("checkBox");

//get value of any check box , and return it into highlite() as parameter 
for(let w = 0; w < checkBoxs.length; w++){
checkBoxs[w].addEventListener("click", () => highlite(checkBoxs[w].value) );
}
highlite("vip"); // call function with default value 
function highlite(parm){
let planCols = document.getElementsByClassName("plan-col");
//get value of any 'data-set' attrs
for(let w = 0; w < planCols.length; w++){
// if current 'data-set' equal checked value
  if(parm == planCols[w].getAttribute("data-set")){
  //  if true , add a new class name (highlited)
  planCols[w].classList.add("highlited");
  }else{
  // esle ? remove highlited
  planCols[w].classList.remove("highlited");
  }
}
}
.container{padding:1re 2rem;}
.container .grid-container{display: grid;grid-template-columns: 1fr 150px;}
.container .plans{display: grid;grid-template-columns: 1fr 1fr 1fr;}
.container .options{padding:.7rem;}
.plan-col{border: 1px solid #eee;text-align:center;margin:0 .5rem}
.plan-col div {margin:.5rem 0;}
.plan-col div > * {display:inline;}
.plan-col.highlited{background-color: #dfefff;}
.container .options > div {padding: .1rem;}
.options div > * {display:inline;}
<div class="container">
  <div class="grid-container">
    <div class="plans">
      <div class="plan-col" data-set="basic">
        <h4>Basic</h4>
        <div>
          <strong>CPU</strong>
          :
          <p>2.3GHz</p>
        </div>
        <div>
          <strong>RAM</strong>
          :
          <p>8GB</p>
        </div>
      </div>
      <div class="plan-col" data-set="vip" >
        <h4>VIP</h4>
        <div>
          <strong>CPU</strong>
          :
          <p>2.7GHz</p>
        </div>
        <div>
          <strong>RAM</strong>
          :
          <p>16GB</p>
        </div>
      </div>
      <div class="plan-col" data-set="basic">
        <h4>Basic (new)</h4>
        <div>
          <strong>CPU</strong>
          :
          <p>3.4GHz</p>
        </div>
        <div>
          <strong>RAM</strong>
          :
          <p>16GB</p>
        </div>
      </div>
    </div>
    <div class="options">
      <div>
      <input type="radio" id="basic" class="checkBox" name="contact" value="basic" >
      <label for="basic" >Basic</label>
      </div>
      <div>
      <input type="radio" id="vip" class="checkBox" name="contact" value="vip" checked>
      <label for="vip" >VIP</label>
      </div>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda