JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<form id="super-form">
    <p>- подтверждение опухоли</p>
    <ul class="proof">
        <li>
            <input type="radio" name="proof" value="P1" />
            <label>Клинически</label>
        </li>
        <li>
            <input type="radio" name="proof" value="P2" />
            <label>Патогистологически</label>
        </li>
    </ul>
    <hr/>
    <p>- характеристика первичной опухоли - Т</p>
    <ul class="tumor">
        <li>
            <input type="radio" name="tumor" value="Tx" />
            <label>Недостаточно данных для оценки первичной опухоли - Тх</label>
        </li>
        <li>
            <input type="radio" name="tumor" value="T0" />
            <label>Первичная опухоль не определяется - Т0</label>
        </li>
        <li>
            <input type="radio" name="tumor" value="T1" />
            <label>Опухоль клинически не проявляется, не пальпируется и не визуализируется специальными методами - Т1, <b>но при этом:</b>

            </label>
            <ul>
                <li>
                    <input type="radio" name="tumor" value="T1a" />
                    <label>Опухоль случайно обнаруживается при гистологическом исследовании и составляет менее 5% резецированной ткани - Т1a</label>
                </li>
                <li>
                    <input type="radio" name="tumor" value="T1b" />
                    <label>Опухоль случайно обнаруживается при гистологическом исследовании и составляет более 5% резецированной ткани - Т1b</label>
                </li>
                <li>
                    <input type="radio" name="tumor" value="T1c" />
                    <label>Опухоль диагностируется с помощью игольной биопсии - Т1c</label>
                </li>
            </ul>
        </li>
        <li>
            <input type="radio" name="tumor" value="T2" />
            <label>Опухоль находится в пределах предстательной железы - Т2, при этом:</label>
            <ul>
                <li>
                    <input type="radio"...

CSS

#super-form ul {
    list-style-type: none;
}
#super-form > ul {
    padding-left: 0;
}
#super-form ul li ul {
    display: none;
}

JavaScript

var list = $('#super-form > ul > li > input'),
    button = $('#super-button');

list.each(function () {
    $(this).click(function (e) {
        var parent = '.' + $(this).attr('name'),
            all_childs = $(parent).find('ul'),
            this_child = $(this).parent().find('ul');

        all_childs.hide();
        this_child.show();
    });
});

button.click(function () {
    var radiobuttons = $('#super-form input[type="radio"]:checked'),
        result = $('#result'),
        text = '';

    radiobuttons.each(function () {
        text += ($(this).val());
    });
    result.html(text);
});