Tengo dos cajas, una contiene btns de radio y en otra caja tengo algunos valores. Si hago clic en el primer botón de opción. Los valores de la primera columna deben resaltar.
Creo que necesita usar data-* y marcar cualquier valor de casilla de verificación.
luego, puede agregar un nombre de clase específico como highlited para hacer un estilo especial.
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>