CODEWITHSUNDEEP
jquerycssradio-button
pv619
pv619

Reputation: 409

jQuery to add CSS class to selected radio button

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>

Upvotes: 4

Views: 1993

Answers (5)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

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>

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7165

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>

Upvotes: 1

Wei Lin
Wei Lin

Reputation: 3791

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 2

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 1

Related Questions