I have a multi-step HTML form.

When the buttons are selected, an automatic transition to the next step with JavaScript is provided.

How can I add an effect when the buttons are selected?

I want the background to be blue and the text to be white when the button is selected. If possible, with JavaScript.

$(document).ready(function() {
  'use strict';

  $('input[type=radio], input[type=checkbox]').on('click', function(e) {

    console.log($(this).val());
    $(this).parents('.test-step').next().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

  $('.test-step .prev-btn').on('click', function(e) {

    $(this).parents('.test-step').prev().addClass('active');
    $(this).parents('.test-step').removeClass('active');
  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <input type="radio" name="calisan-sayisi" value="1 - 2" class="form-control" id="1 - 2">
  <label for="1 - 2">1 - 2</label>
</div>

Thanks.

CodePudding user response：

input:checked   label {background: blue; color: white}

CodePudding user response：

If you want to stilish your radio button why don´t use CSS. What is the problem? https://codepen.io/carlos-turpin-trives/pen/QWgzrwr

<div class="wrapper">
      <input type="radio" name="select" id="option-1" checked>
      <input type="radio" name="select" id="option-2">
      <label for="option-1" class="option option-1">
        <div class="dot"></div>
        <span>Student</span>
      </label>
      <label for="option-2" class="option option-2">
        <div class="dot"></div>
        <span>Teacher</span>
      </label>
    </div>


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #0069d9;
}
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 100px;
  width: 400px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
  border-color: #0069d9;
  background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
  color: #fff;
}

CodePudding user response：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    'use strict';

    $('input[type=radio], input[type=checkbox]').on('click', function (e) {
      console.log($(this).val());
      $('.test-step').addClass('active').change();
      // $(this).parents('.test-step').addClass('active');
      // $(this).parents('.test-step').removeClass('active');
    });

    $('.test-step .prev-btn').on('click', function (e) {
      $(this).parents('.test-step').prev().addClass('active');
      $(this).parents('.test-step').removeClass('active');
    });
  });
</script>
<style>
  .test-step {
    padding: 20px;
  }
  .active {
    padding: 20px;
    border: 1px solid black;
    border-radius: 30px;
    background: blue;
    color: white;
  }
</style>
<div class="form-group">
  <div class="test-step">
    <input
      type="radio"
      name="calisan-sayisi"
      value="1 - 2"
      class="form-control"
      id="1 - 2"
    />
    <label for="1 - 2">1 - 2</label>
  </div>
</div>

CodePudding user response：

Use :"accent-color" property of CSS. It will solve your problem directlt. You will get whole info about accent-color in this link https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color