bootstrap and react, assign .active class on radio buttons

Question

I have a row of custom radio buttons that change size if they're checked. By default the first is checked and when I click on another button, bootstrap should add the .active class, problem is that the class is not beign added because I dropped the jquery bootstrap library. how can I do this in pure javascript? I tried with simple CSS

 CSS .step { background-position: center; background-repeat: no-repeat; background-size: contain; color: #fff; cursor: pointer; font-size: 2.2rem; height: 55px; margin-top: 0.2rem; margin-bottom: 0.2rem; opacity: 0.8; overflow: hidden; position: relative; text-shadow: 2px 2px 0px #000; transition: 0.4s; width: 55px; z-index: 1; } .step.active { opacity: 1; position: relative; text-shadow: 2px 2px 0px #000, 0px 0px 10px #fff, 0px 0px 10px #fff; transform: scale(1.8); z-index: 99; } TRIED input[type="radio"]:checked+label{ opacity: 1; position: relative; text-shadow: 2px 2px 0px #000, 0px 0px 10px #fff, 0px 0px 10px #fff; transform: scale(1.8); z-index: 99; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div className="row my-3 btn-group btn-group-toggle step-container mb-3" data-toggle="buttons"> <div className="col p-0 my-auto"> <label className="btn btn-radio mx-auto step active"> <input type="radio" name="step" id="step1" autocomplete="off">1 </label> </div> <div className="col p-0 my-auto"> <label className="btn btn-radio mx-auto step"> <input type="radio" name="step" id="step2" autocomplete="off">2 </label> </div> <div className="col p-0 my-auto"> <label className="btn btn-radio mx-auto step"> <input type="radio" name="step" id="step2" autocomplete="off">3 </label> </div> </div>

Answer 1

You can add an function for the radio click which will remove the active class from already set active elements and add class to the current element. you can refer to the below example.

 function myFunction(e) { var arr = document.getElementsByName('radioa'); arr.forEach(function(a) { a.classList.remove("active");}); e.classList.add("active"); }

 .active{ opacity: 1; position: relative; text-shadow: 2px 2px 0px #000, 0px 0px 10px #fff, 0px 0px 10px #fff; transform: scale(1.8); z-index: 99; }

 <input type="radio" name="radioa" onclick="myFunction(this)"/> <input type="radio" name="radioa" onclick="myFunction(this)"/> <input type="radio" name="radioa" onclick="myFunction(this)"/>