CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tim Wilson
Tim Wilson

Reputation: 45

Change DIV CSS class with radio buttons

I've been trying to change the CSS class based on radio buttons and it does work, however it will only run once. E.g. If I select the white radio button then select oak, selecting white does nothing until a page refresh. I'm most certainly doing something wrong and any help would be appreciated.

$("#radio").on('change','input[type=radio]', (function() { 
  if($("#oakradio").is(":checked")) {
    $("#over").removeAttr();
    $('#over').addClass('oak');
  }
  else if($("#whiteradio").is(":checked")) {
    $("#over").removeAttr();
    $('#over').addClass('white');
  }
  else if($("#mocharadio").is(":checked")) {
    $("#over").removeAttr();
    $('#over').addClass('mocha');
  }
}));
    #over.mocha {
      background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_mocha.jpg");
      background-repeat: no-repeat;
      height: 515px;
      width: 1190px;
      margin: 0 auto 30px;
      position: relative;
    }

    iframe {
      height: 333px;
      width: 1000px;
      position: absolute;
      top: 93px;
      left: 93px;
    }

    #over.white {
      background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_white.jpg");
      background-repeat: no-repeat;
      height: 515px;
      width: 1190px;
      margin: 0 auto 30px;
      position: relative;
    }

    #over.oak {
      background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_oak.jpg");
      background-repeat: no-repeat;
      height: 515px;
      width: 1190px;
      margin: 0 auto 30px;
      position: relative;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="over" class="mocha">
  <iframe src="http://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/photo71000333.png"></iframe>
</div>
<form id="radio">
  <input type="radio" name="color" value="white" id="whiteradio">White<br>
  <input type="radio" name="color" value="oak" id="oakradio">Oak<br>
  <input type="radio" name="color" value="mocha" id="mocharadio">Mocha<br>
</form>

Upvotes: 3

Views: 1196

Answers (4)

DobromirM
DobromirM

Reputation: 2027

You are not removing the previous class you are just adding them. Change your .removeAttr() with .removeClass()

JSFiddle: https://jsfiddle.net/8f2bru0k/1/

Upvotes: 3

No one
No one

Reputation: 1140

You need to use removeClass and addClass. Don't use removeAttr().

Also, you can simplify your code to 2 lines only.

$("#radio").on('change','input[type=radio]',(function() { 
  var color = $(this).val();
  $('#over').removeClass("white mocha oak").addClass(color);
}));

Upvotes: 5

Ikhlak S.
Ikhlak S.

Reputation: 9024

I assume you might be using .removeAttr since .removeClass is a bit buggy in a few versions of jQuery.

Instead of removing the class attribute, just set class attribute using .attr()instead:

$("#radio").on('change','input[type=radio]',(function() { 
  if($("#oakradio").is(":checked")){
    $("#over").attr("class", "oak");
  }
  else if($("#whiteradio").is(":checked")){
     $("#over").attr("class", "white");
  }
  else if($("#mocharadio").is(":checked")){
    $("#over").attr("class", "mocha");
  }
}));

Upvotes: 0

Joseph Cho
Joseph Cho

Reputation: 4214

Try using the removeClass() method instead to reset your classes. removeAttr() is used to remove specific attributes such as onclick handlers or titles as specified in the documentation.

By using removeClass() you effectively reset the classes on #over. Working fiddle here: https://jsfiddle.net/yzg7j8xz/

Upvotes: 2

Related Questions