jQuery to add CSS class to selected radio button

Question

I am trying to add a CSS class to a radio button based on which radio button is selected.

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $("input[type=radio][name=align]").val();
  if (radVal == 'center') {
    $(".tlt1").addClass('centerCssClass').change();
    $(".tlt1").removeClass('topCssClass').change();
  } else if (radVal == 'top') {
    $(".tlt1").addClass('topCssClass').change();
    $(".tlt1").removeClass('centerCssClass').change();
  }
});

.centerCssClass {
  background-color: blue;
}

.topCssClass {
  background-color: red;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1"></div>

score 2 · Accepted Answer · answered Jun 11 '18 at 09:48

You have two issues here. Firstly the selector you're retrieving the value from is incorrect. You should use the this reference to get the value from the clicked radio button.

Secondly you need to make the CSS classes more specific so that they override the original background-color setting of .tlt1. Try this:

var $tlt = $(".tlt1");

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $(this).val();
  if (radVal == 'center') {
    $tlt.addClass('centerCssClass').removeClass('topCssClass');
  } else if (radVal == 'top') {
    $tlt.addClass('topCssClass').removeClass('centerCssClass')
  }
});

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

.tlt1.centerCssClass {
  background-color: blue;
}

.tlt1.topCssClass {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1"></div>

Note that you also don't need to trigger the change() event on the div elements as it's redundant.

Thank you @Rory for a detailed explanation. This answer has resolved my question and given me in-depth knowledge on the issue posted. Thanks bro. — pv619, Jun 11 '18 at 09:54

score 1 · Answer 2 · answered Jun 11 '18 at 09:47

You need to use :checked selector to get selected radio button value and slightly change the CSS class declaration to override the background-color

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $("input[type=radio][name=align]:checked").val();
  if (radVal == 'center') {
    $(".tlt1").addClass('centerCssClass').removeClass('topCssClass');
  } else if (radVal == 'top') {
    $(".tlt1").addClass('topCssClass').removeClass('centerCssClass');
  }
});

.tlt1.centerCssClass {
  background-color: blue;
}

.tlt1.topCssClass {
  background-color: red;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1">tlt1</div>

Thank you @Satpal for posting a detailed answer. Thank you for your time and have a great day bro :) — pv619, Jun 11 '18 at 09:59

score 1 · Answer 3 · answered Jun 11 '18 at 09:54

because tlt1's background color can't be covered

so you have to add !important after centerCssClass,topCssClass css

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $(this).val();
  var tlt1 = $("#tlt1");
  if (radVal == 'center') {
    tlt1.addClass('centerCssClass').change();
    tlt1.removeClass('topCssClass').change();
  } else if (radVal == 'top') {
    tlt1.addClass('topCssClass').change();
    tlt1.removeClass('centerCssClass').change();
  }
});

.centerCssClass {
  background-color: blue !important;
}

.topCssClass {
  background-color: red !important;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div id='tlt1' class="tlt1"></div>

Thanks @IT for providing help on the CSS. I have added `!important` to the CSS. Thank you and have a great day :) — pv619, Jun 11 '18 at 10:00
@pv619, using `!important` is bad practice and it should be avoided, see mine or Rory's answer and read https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Satpal, Jun 11 '18 at 10:01

Krzysztof Janiszewski · Answer 4 · 2018-06-11T10:15:37.607

Your solution is correct, just inside change event change var radVal = $("input[type=radio][name=align]").val(); to var radVal = $(this).val();

Because right now you get value of first element that is an input has attribute type='radio' and name='align'. So first element in your case has value center, so it is always center. And by using $(this) you get the element that was actually changed.

Also you do not have to trigger change() event on your .tlt1 element.

Lastly in your css the value that is lower is more respected than the one higher. That is why your background did not change. Because background for class .tlt1 was more important than to class centerCssClass.

Here is an working example

$("input[type=radio][name=align]").on('change', function () {
    var radVal = $(this).val();
    if (radVal == 'center') {
        $(".tlt1").addClass('centerCssClass');
        $(".tlt1").removeClass('topCssClass');
    } else if (radVal == 'top') {
        $(".tlt1").addClass('topCssClass');
        $(".tlt1").removeClass('centerCssClass');
    }
});

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

.centerCssClass {
  background-color: blue;
}

.topCssClass {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1"></div>

Thanks bro for an in depth answer on the `$this` value. It made a lot of sense and helped me gained more information of the issue. Have a great day bro :) — pv619, Jun 11 '18 at 10:15

score 1 · Answer 5 · answered Jun 11 '18 at 10:01

try this

use id instead of class tlt1

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $(this).val();
  if (radVal == "center") {
    $("#tlt1").removeClass('topCssClass').change();
    $("#tlt1").addClass('centerCssClass').change();
    $("#tlt1").removeClass('tlt1');
  } else {
    $("#tlt1").removeClass('centerCssClass').change();
    $("#tlt1").addClass('topCssClass').change();
    $("#tlt1").removeClass('tlt1');
  }
});

.centerCssClass {
  float: left;
  height: 300px;
  width: 300px;
  background-color: blue;
}

.topCssClass {
  float: left;
  height: 300px;
  width: 300px;
  background-color: red;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1" id="tlt1"></div>

Thanks bro your answer and have a great day :) – pv619 Jun 11 '18 at 10:16 — pv619, Jun 11 '18 at 10:16

jQuery to add CSS class to selected radio button

5 Answers5