Toggle CSS class depending on the radio button status

Question

I'm working on a better user interface and I tried to achieve a way to visualize radio buttons. I got the following code to the point where the radio button input will be checked and the class highlightedBox added on color click.

How can I manage to toggle the class highlightedBox depending on the radio button status? Now toggle get triggered on click but this solution wont work if the user decides to deselect the color button by selecting another color.

I know the current status of the code only works for a single change per color. If you want to select the same color again the checked value wont be set. But this is another problem and I'll try to fix this later on.

$('#wireColorSelect #wireBox').click(function(){
        var checkbox = $(this).parent().find(".cbox");
        var wireDOM = $(this).parent().find("#wireBox");
        checkbox.attr('checked', !checkbox.attr('checked'));
        wireDOM.toggleClass('highlightedBox');
    });

.wireBox{
    border: 1px solid;
    height:50px;
    width:50px;
    opacity: 0.5;
}

.white{
    background-color: White;
}

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

.yellow{
    background-color: yellow;
}

.highlightedBox {
    opacity: 1;
}

user_10606400 · Answer

You can use .not() to exclude element i.e : div which is not currently clicked by user and removeClass from them .

Demo Code :

$('#wireColorSelect .wireBox').click(function() {
  var checkbox = $(this).parent().find(".cbox");
  var wireDOM = $(this)
  checkbox.prop('checked', checkbox.is(":checked") ? false : true);
  wireDOM.toggleClass('highlightedBox');
  //remove checked from other checkboxes
  $(".cbox").not(checkbox).prop('checked', false);
  //remove highlight class from other
  $(".wireBox").not(wireDOM).removeClass("highlightedBox")
});

.wireBox {
  border: 1px solid;
  height: 50px;
  width: 50px;
  opacity: 0.5;
}

.white {
  background-color: White;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.highlightedBox {
  opacity: 1;
}

Toggle CSS class depending on the radio button status

1 Answers