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> 

Answer 1

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.

Answer 2

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> 

Answer 3

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> 

Answer 4

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> 

Answer 5

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>