Using jQuery to apply a CSS class to a chosen radio button

Question

Using jQuery to apply a CSS class to a chosen radio button

How can I dynamically add a CSS class to a radio button based on its selection?

$("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>

jquery css radio-button

Answer 1

Answer №1

There are two issues that need to be addressed here. The first problem lies in the incorrect selector you are using to retrieve the value. Make sure to use the this reference to fetch the value from the radio button that was clicked.

Secondly, it is essential to enhance the specificity of the CSS classes so they can override the original background-color setting of .tlt1. Consider implementing the following changes:

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>

Additionally, triggering the change() event on the div elements is unnecessary and redundant.

Answer 2

There are two issues that need to be addressed here. The first problem lies in the incorrect selector you are using to retrieve the value. Make sure to use the this reference to fetch the value from the radio button that was clicked.

Secondly, it is essential to enhance the specificity of the CSS classes so they can override the original background-color setting of .tlt1. Consider implementing the following changes:

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>

Additionally, triggering the change() event on the div elements is unnecessary and redundant.

Answer 3

Answer №2

To access the value of the selected radio button and update the CSS class, you can utilize the :checked selector in your code. Make sure to adjust the CSS class declaration to customize the background-color as needed.

$("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

To access the value of the selected radio button and update the CSS class, you can utilize the :checked selector in your code. Make sure to adjust the CSS class declaration to customize the background-color as needed.

$("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 5

Answer №3

since the background color of tlt1 cannot be overridden

you must include !important after centerCssClass and topCssClass in the 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 6

since the background color of tlt1 cannot be overridden

you must include !important after centerCssClass and topCssClass in the 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 7

Answer №4

give this a shot

consider using id rather than 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>

Answer 8

give this a shot

consider using id rather than 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>

Answer 9

Answer №5

Great job, your solution is accurate! Just remember to update the

var radVal = $("input[type=radio][name=align]").val();

inside the change event to var radVal = $(this).val();

Currently, you are fetching the value of the first element with input tag, having attributes type='radio' and name='align'. As a result, it always returns 'center' as the value. By using $(this), you target the specific element that was changed.

Furthermore, there’s no need to trigger the change() event on your .tlt1 element.

Lastly, in your CSS, lower values take precedence over higher ones. This explains why your background didn’t change - the styling for .tlt1 class had more significance than centerCssClass.

Check out this working example below:

$("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 10

Great job, your solution is accurate! Just remember to update the

var radVal = $("input[type=radio][name=align]").val();

inside the change event to var radVal = $(this).val();

Currently, you are fetching the value of the first element with input tag, having attributes type='radio' and name='align'. As a result, it always returns 'center' as the value. By using $(this), you target the specific element that was changed.

Furthermore, there’s no need to trigger the change() event on your .tlt1 element.

Lastly, in your CSS, lower values take precedence over higher ones. This explains why your background didn’t change - the styling for .tlt1 class had more significance than centerCssClass.

Check out this working example below:

$("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>

Using jQuery to apply a CSS class to a chosen radio button

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Photo positioned on top of the form with Bootstrap 5

What is the most efficient method for retrieving all form elements that are currently visible using jQuery and do not belong to a particular class?

floating point for a list item compared to other elements

Dropdown selection values were not set appropriately

The CSS 'top' attribute is without impact

What is the best way to create a text input that is both secure and non-editable?

The functionality of the window.location.href in an Asp.Net MVC application is not properly functioning on Google Chrome

Handsontable: A guide on adding up row values

CORS - Preflight request response fails access control verification

Center a grid of cards on the page while keeping them aligned to the left

Having issues with the presentation of full_numbers pagination in IE while using jQuery dataTables

What methods can I use to transfer data from one domain to another domain utilizing Ajax JSONP?

Focusing on a specific image using Jquery

Launching JQuery modal upon button click

Is there a way to arrange the cards in a row so they fill up the grid before moving on to the next row?

Passing parameters to a new page in AngularJS using ng-click event

Building a new directory in Laravel

Challenges with handling Ajax responses in Ruby on Rails

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

Showing JSON data stored in Local Storage