Класс highlight
добавляется в родительскую таблицу независимо от того, какой переключатель выбран.
$('.logo-group').click(function() {
$(".logo-group").each(function() {
$(this).closest("table").toggleClass("highlight", $(this).is(":checked"));
});
});
$('input:radio:checked').trigger('click');
#logo-options .image {
opacity: .5;
}
table.container.highlight {
border: 1px solid #aaa !important;
}
table.container.highlight .image {
opacity: 1 !important;
}
#custom-logo-group {
opacity: .5;
}
#custom-logo-group.highlight {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<table id="logo-options" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="">
<table class="container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">
<div class="title">Default Logo</div>
<div class="image"><img src="https://osticketawesome.com/+current/scp/images/ost-logo.png" alt="Default Logo"></div>
</td>
<td class="right">
<div class="toggle">
<input type="radio" value="choose-theme" id="radio3" name="logo-radio" class="switch logo-group" />
<label for="radio3"> </label>
</div>
</td>
</tr>
</table>
<table class="container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">
<div class="title">Custom Text</div>
<div class="image"><img src="https://osticketawesome.com/+current/scp/images/ost-logo.png" alt="Custom Text"></div>
</td>
<td class="right">
<div class="toggle">
<input type="radio" value="choose-theme" id="radio4" name="logo-radio" class="switch logo-group" checked />
<label for="radio4"> </label>
</div>
</td>
</tr>
</table>
<table class="container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">
<div class="title">Custom Logo</div>
<div class="image"><img src="https://osticketawesome.com/+current/scp/images/ost-logo.png" alt="Custom Logo"></div>
</td>
<td class="right">
<div class="toggle">
<input type="radio" value="choose-theme" id="radio5" name="logo-radio" class="switch logo-group" />
<label for="radio5"> </label>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<tr>
<td id="custom-logo-group" class="">hello</td>
</tr>
</table>
Пока все хорошо.
Но я также хочу, чтобы класс highlight
был добавлен к другая таблица с идентификатором custom-logo-group
, когда переключатель radio5
выбран = true.