CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ervan
Ervan

Reputation: 91

Change the border color in table when a radio button is clicked

I'm trying to change the border color in a table when the radio button is clicked.

I've tried using jQuery but the result is not what I expected.

here is my code: https://codepen.io/ervannnn/pen/gOObrdP

javascript:

$('input[type=radio]').change(function() {    
    $('.box-tr-1').removeClass().addClass('box-tr-1-se');
    $(this).parent().addClass('box-tr-1');
});

css:

table {
    border-collapse: collapse;
}
.table-item {
    width: 90%;
}
.box-tr-1 {
    border-left: 4px solid #ddd;
    border-right: 4px solid #ddd;
    border-top: 4px solid #ddd;
}
.box-tr-2 {
    border-left: 4px solid #ddd;
    border-right: 4px solid #ddd;
}

.box-tr-3 {
    border-top: 4px solid #ddd;
}

.box-tr-1-se {
    border-left: 4px solid red;
    border-right: 4px solid red;
    border-top: 4px solid red;
}
.box-tr-2-se {
    border-left: 4px solid red;
    border-right: 4px solid red;
}

.box-tr-3-se {
    border-top: 4px solid red;
}

codepen: https://codepen.io/ervannnn/pen/gOObrdP

Please help me, any help will be appreciated, many thanks!

Upvotes: 0

Views: 324

Answers (1)

Mat.Now
Mat.Now

Reputation: 1725

You code is a little mess, but it should work for your purpose:

$('input[type=radio]').change(function() {   
  $('tr').each(function(){
    $(this).removeClass('box-tr-1-se');
    $(this).removeClass('box-tr-2-se');
  })
  if($(this).is(':checked')){
    $(this).parent().parent().addClass('box-tr-1-se');
    $(this).parent().parent().next().addClass('box-tr-2-se')          
  }
});

.box-tr-2-se {
  border-left: 4px solid red;
  border-right: 4px solid red;
  border-bottom: 4px solid red;
 }

EDIT: Add/remove text color:

$('.table-item input[type=radio]').change(function() {
  $('.table-item tr').each(function(){
    //Previous methods...
    $(this).find('.red').removeClass('red')
  })
  if($(this).is(':checked')){
    //Previous methods...
    $(this).parent().next().children().eq(1).addClass('red');
  }
});

Upvotes: 2

Related Questions