Практическое руководство. Если атрибут данных равен значению радиовыбора, добавьте класс

Question

У меня возникла проблема с выяснением того, как закодировать это, я новичок в JS/jQuery, так что легко на меня!

Я хочу получить идентификатор выбранного переключателя, который я выполнил. Затем я хочу найти строку таблицы <tr>, которая имеет соответствующий атрибут данных и добавит к нему класс. Моя проблема пытается найти значение данных атрибута вызывают TR возвращается, не определено, так как есть атрибуты множественным данных, так что я не могу сделать:

if (dataAttribute = radioSelect) { 
    $(this).addClass("test"); 
} 

В основном моя проблема с несколькими строками таблицы и не зная, как их выделить.

Вот грубый пример моего кода:

https://jsfiddle.net/2dsvrhjo/1/

Любая помощь очень ценится.

Answer 1

Вы можете выбрать с помощью данных-атрибутов, как так:

$('input[type="radio"]').change(function() { 
 
    // Get Choice for Application 
 
    var application = $('input[name="application"]:checked').prop('id') || ''; 
 
    
 
    // Get all tr's with the selected data-app 
 
    var $trs = $('tr[data-app="'+application+'"]'); 
 
    
 
    // Add your class 
 
    $trs.addClass('highlight'); 
 
    
 
    // Remove the class from all other tr's 
 
    $('tr').not($trs).removeClass('highlight'); 
 
});

.highlight { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="radio" id="Aviation" name="application" />Aviation<br> 
 
    <input type="radio" id="Civil" name="application" />Civil 
 
</div> 
 
<table border="1" style="text-align:center;"> 
 
    <tr> 
 
    <th>Section One</th> 
 
    <th>Section Two</th> 
 
    </tr> 
 
    <tr data-app="Aviation"> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    </tr> 
 
    <tr data-app="Civil"> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    </tr> 
 
    <tr data-app="Aviation"> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    </tr> 
 
    <tr data-app="Civil"> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    </tr> 
 
</table>

Answer 2

Вот простой случай:

$('input[type="radio"]').on('change',function() { 
     // Get Choice for Application 
    var application = $(this).attr('id'); 
    $('table').find('tr').each(function(i){ 
     if ($(this).attr('data-app') == application){ 
     $(this).addClass('test'); 
     } else { 
     $(this).removeClass('test'); 
     } 

    }); 
}); 

Просто обновите скрипку с кодом выше.

Этот код зацикливается кап каждый и проверка соответствия 'данных-приложение'