'Radio Button mutlilevel filter using jquery html

I am working with multilevel filter based on radio selection, where I need to open hierarchy on parent selection

As on simple hide and show jQuery function I tried hiding fields with hardcode coding,

And I need smart way to handle lengthy hierarchy filter, which I am not able to do with code I have done

Here is a JSfiddle link - https://jsfiddle.net/Lqomhwg5/

<html>
    <head>
        <script>
            function openProtocolView(){
                $('input:radio[name=ProtocolViewVerticalSingleBoth]').each(function () { $(this).prop('checked', false); });
                $('input:radio[name=ACodebcode]').each(function () { $(this).prop('checked', false); });
                $('input:radio[name=bcode_ccvs]').each(function () { $(this).prop('checked', false); });
                $("#ProtocolViewChild").css("display","block")
                hideAllOtherViewThanProtocol()
            }
            function openSmartView(){
                $("#smartViewChild").css("display","block")
                hideAllOtherViewThanSmart()
            }
            function openShapeView(){
                $("#shapeViewChild").css("display","block")
                $("#shapeViewChildVerticalSingleSide").css("display","none")
                $('input:radio[name=shapeViewVerticalSingleBoth]').each(function () { $(this).prop('checked', false); });
                hideAllOtherViewThanShape()
            }
        </script>
    </head>
    <body>
        <div class="main-div">
            <div class="View-name" onclick="openProtocolView()">
                <label for="ProtocolView">Protocol View</label>
                <input type="radio" id="ProtocolView" name="MainView" value="ProtocolView">
            </div>
            <div class="View-name" onclick="openSmartView()">
                <label for="smartView">Smart View</label>
                <input type="radio" id="smartView" name="MainView" value="smartView">
            </div>
            <div class="View-name" onclick="openShapeView()">
                <label for="shapeView">Shape View</label>
                <input type="radio" id="shapeView" name="MainView" value="shapeView">
            </div>
        </div>
    </body>
</html>

So is there any library or trick to handle the same with so many child and grand child filter options? Thanks.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Radio Button mutlilevel filter using jquery html

Sources

Related Questions