Используя jQuery мне нужно нацелиться на группу переключателей и выделить активную

Question

У меня есть группа радиокнопок. Вот первый:

<form action="../opt/logo/logo-options.php" method="post">
<table class="container" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="right"> 
            <div id="osta-toggle">
                  <input id="radio4" class="switch" type="radio" name="logo-options" value="default" <?php echo chk( $opt, "logo-options", "default" )?>>
                <label for="radio4">&nbsp;</label>  
            </div>  
        </td>
    </tr>
</table>
etc.

Я использую jQuery и CSS для выделения активной радиокнопки.

    $('input:radio').click(function() {
        $("input:radio").each(function() {
            $(this).closest("table").toggleClass("highlight", $(this).is(":checked"));
        });
    });

Когда кнопка переключается в положение «ON», класс highlight добавляется в контейнер.

<table class="container highlight" border="0" cellspacing="0" cellpadding="0">

Проблема в том, что у меня есть другая группа переключателей на той же странице.

Мой код отлично работает, когда он изолирован. Но когда он находится на той же странице, что и другие переключатели, он выдает на первый взгляд случайные результаты.

Как настроить jQuery для настройки моей конкретной группы радиокнопок?

Answer 1

Вероятно, есть несколько способов решить эту проблему, но один из способов - применить определенный класс к переключателям, которым вы хотите поделиться этим кодом.

<input id="radio4" class="switch highlight-control" type="radio" name="logo-options" value="default" <?php echo chk( $opt, "logo-options", "default" )?>>

Тогда в вашем селекторе jquery посмотрите толькона предметы с этим классом.Таким образом, $('input:radio').click(function() { становится $('.highlight-control').click(function() {

И проделайте то же самое для селектора .each.

Answer 2

Если таблица, которую вы пытаетесь стилизовать, всегда включает переключатель, возможно, попробуйте это:

    $('input:radio').click(function() {
        var tableContainer = $(this).parents('table');
        tableContainer.toggleClass('highlighted', $(this).is(':checked'));
    });

Answer 3

Вы можете сделать это с помощью css, но если вы хотите продолжить использовать ваше событие / функцию, вы можете сделать что-то вроде этого: Установите все входы на «выкл» и только «на» выбранном:

$('input:radio').click(function() {
    $("input:radio").closest("table").removeClass('highlight');
    $(this).closest("table").addClass("highlight", $(this).is(":checked"));
});