JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<table class="form-table">
    <tbody>
        <tr valign="top" class="n2-optionparent">
            <th scope="row">Allow File Attachment</th>
            <td>
                <label for="wpas_ticket_allow_file_attachmentYes">
                    <input type="radio" name="wpas_ticket_plugin_options[allow_file_attachment]" value="yes" id="wpas_ticket_allow_file_attachmentYes" />Yes</label>
                <br class="n2_clear">
                <label for="wpas_ticket_allow_file_attachmentNo">
                    <input type="radio" name="wpas_ticket_plugin_options[allow_file_attachment]" value="no" id="wpas_ticket_allow_file_attachmentNo" checked="" />No</label>
                <br class="n2_clear">
                <label for="wpas_ticket_file_types">
                    <input type="radio" name="wpas_ticket_plugin_options[allow_file_attachment]" value="test" id="wpas_ticket_file_types" />Allowed Files Types</label>
                <br class="n2_clear">
                <label for="wpas_ticket_another">
                    <input type="radio" name="wpas_ticket_plugin_options[allow_file_attachment]" value="another" id="wpas_ticket_another" />another</label>
                <br class="n2_clear">
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">Max. Attachments</th>
            <td>
                <input type="text" name="wpas_ticket_plugin_options[files_number]" id="wpas_ticket_files_number" value="10" class="regular-text n2-optionchild" data-parentoption="wpas_ticket_file_types">
                <p class="description">Maximum number of files that can be attached to a ticket.</p>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">Max. Size for Attachments</th>
            <td>
                <input type="text" name="wpas_ticket_plugin_options[files_size]" id="wpas_ticket_files_size" value="10" class="regular-text n2-optionchild" data-parentoption="wpas_ticket_allow_file_attachmentYes">
        ...

CSS

.n2-optionchild {
    color: orange;
}

JavaScript

/*
var options = [];
$('.n2-optionparent input[type="radio"]').each(function (e) {
    // create an array that contains all id of select
    options.push($(this).attr('id'));
});
console.log(options);
*/

var tr = $('.n2-optionchild').parents('tr');
tr.addClass('n2-optionchild').hide();
$('.n2-optionparent input[type="radio"]').change(function (e) {
    var optionCurrent = $(this).attr('id');
    console.log(optionCurrent);
    if ($(this).is(':checked') && $(this).attr('id') == optionCurrent) {
        tr.hide();
        $('.n2-optionchild[data-parentoption="' + optionCurrent + '"]').parents('tr').show();
    }
}).change();