单击无线电标签时，我如何更改课程

Question

我想在单击按钮

时更改类

我正在标题中使用此代码：

$(function() {
  // When the value of the radio change
  $('.radioPanel [type="radio"]').on('change', function() {
    $(this)
      .prev().addClass('red')
      .siblings().removeClass('red');
  });
});

.rp-recuadro {
  border: 2px solid #2e3180;
  padding: 10px 20px;
  margin: 0px 20px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 5px;
}
.red {
  background: #2e3180;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="step1">
  <div class="secciones">
    <h2>¿Cuántos vehículos tienes?</h2>
    <div class="rp-flex">
      <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="A"> Opción A</label></div>
      <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="B"> Opción B</label></div>
      <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="C"> Opción C</label></div>
    </div>
    <button type="button" onclick="goToNextStep(1)">Continuar</button>
  </div>
</section>

Answer 1

您可以尝试此

var rad = document.myForm.nombreDeVariable1;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
         $('.red').removeClass('red');
         $(this).parent().addClass('red');
       
    });
}

.rp-recuadro{
    border: 2px solid #2e3180;
    padding: 10px 20px;
    margin: 0px 20px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 5px;
}
.red {
    background: #2e3180;
    color: white;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="step1">
    <div class="secciones">
        <h2>¿Cuántos vehículos tienes?</h2>
        <div class="rp-flex">
        <form name="myForm">
            <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="A" cla> Opción A</label></div>
            <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="B"> Opción B</label></div>
            <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="C"> Opción C</label></div>
        </div>
        <button type="button" onclick="goToNextStep(1)">Continuar</button>
    </div>
    </form>
</section>

Answer 2

$(function() {
  var $radios = $('.rp-recuadro input[type=radio]');
  $radios.on('change', function() {
     $radios.removeClass('red');
     $radios.filter(':checked').addClass('red');
  });
});

.rp-recuadro {
  border: 2px solid #2e3180;
  padding: 10px 20px;
  margin: 0px 20px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 5px;
}
.red {
  background: #2e3180;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="step1">
  <div class="secciones">
    <h2>¿Cuántos vehículos tienes?</h2>
    <div class="rp-flex">
      <div>
      <label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="A"> Opción A</label></div>
      <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="B"> Opción B</label></div>
      <div><label class="rp-recuadro"><input type="radio" name="nombreDeVariable1" value="C"> Opción C</label></div>
    </div>
    <button type="button" onclick="goToNextStep(1)">Continuar</button>
  </div>
</section>

首先编辑您是选择器并尝试此代码。

  var $radios = $('.rp-recuadro input[type=radio]');
  $radios.on('change', function() {
     $radios.removeClass('red');
     $radios.filter(':checked').addClass('red');
  });