引导和反应，在单选按钮上分配 .active 类

Posted 2023-03-06

【中文标题】引导和反应，在单选按钮上分配 .active 类

【英文标题】：bootstrap and react, assign .active class on radio buttons

【发布时间】：2020-04-08 20:12:14

【问题描述】：

我有一排自定义单选按钮，如果它们被选中，它们会改变大小。默认情况下，第一个被选中，当我单击另一个按钮时，引导程序应该添加 .active 类，问题是没有添加该类，因为我删除了 jquery 引导程序库。我怎样才能在纯javascript中做到这一点？我尝试使用简单的 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>

【问题讨论】：

jsfiddle.net/piyush05/edhza4ts/1 看看这是不是你需要的...

@Piyush 试过了，但是没用。

这把小提琴给了你想要的输出吗？

@Piyush 不是真的，我尝试删除 +label 但样式没有改变

它在我添加的小提琴中被改变了，不是吗？

【参考方案1】：

您可以为单选单击添加一个功能，该功能将从已设置的活动元素中删除活动类并将类添加到当前元素。 你可以参考下面的例子。

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)"/>