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>

Rory McCrossan · Accepted Answer · 2018-06-11 09:48:57Z

2

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.

answered Jun 11, 2018 at 9:48

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pv619 Over a year ago

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.

Rory McCrossan Over a year ago

That's what we're here for :)

Satpal · Accepted Answer · 2018-06-11 09:47:35Z

1

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>

answered Jun 11, 2018 at 9:47

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

pv619 Over a year ago

Thank you @Satpal for posting a detailed answer. Thank you for your time and have a great day bro :)

Satpal Over a year ago

@pv619, Glad I could help

Wei Lin · Accepted Answer · 2018-06-11 09:54:45Z

1

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>

answered Jun 11, 2018 at 9:54

Wei Lin

3,8213 gold badges27 silver badges61 bronze badges

3 Comments

pv619 Over a year ago

Thanks @IT for providing help on the CSS. I have added !important to the CSS. Thank you and have a great day :)

Satpal Over a year ago

@pv619, using !important is bad practice and it should be avoided, see mine or Rory's answer and read stackoverflow.com/questions/3706819/… developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Wei Lin Over a year ago

it's my pleasure. :)

Bhargav Chudasama · Accepted Answer · 2018-06-11 10:01:52Z

1

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>

answered Jun 11, 2018 at 10:01

Bhargav Chudasama

7,2256 gold badges24 silver badges41 bronze badges

1 Comment

pv619 Over a year ago

Thanks bro your answer and have a great day :)

Krzysztof Janiszewski · Accepted Answer · 2018-06-11 10:15:37Z

1

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>

edited Jun 11, 2018 at 10:15

answered Jun 11, 2018 at 9:55

Krzysztof Janiszewski

3,8293 gold badges21 silver badges38 bronze badges

1 Comment

pv619 Over a year ago

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 :)

Collectives™ on Stack Overflow

jQuery to add CSS class to selected radio button

5 Answers 5

2 Comments

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related