OneCompiler

Filters 2

111

Example heading with h2 size

Example heading with h3 size

Following is sample java code.

int i = 10;
if(i>0){
    System.out.println('positive');
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hierarchical Checkbox Filters</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { margin-bottom: 20px; } </style> </head> <body> <h1>Hierarchical Checkbox Filters</h1> 
<form id="filterForm">
    <!-- Main Ranges -->
    <div class="container">
        <h2>Main Ranges</h2>
        <label><input type="checkbox" class="main-range" data-group="0-4"> 0 - 4</label><br>
        <label><input type="checkbox" class="main-range" data-group="5-30"> 5 - 30</label><br>
        <label><input type="checkbox" class="main-range" data-group="31-60"> 31 - 60</label><br>
        <label><input type="checkbox" class="main-range" data-group="61-120"> 61 - 120</label><br>
    </div>

    <!-- Sub Ranges -->
    <div class="container" id="subRanges">
        <h2>Sub Ranges</h2>
        <div data-parent="0-4"></div>
        <div data-parent="5-30">
            <label><input type="checkbox" class="sub-range" data-group="5-9" data-parent="5-30"> 5 - 9</label><br>
            <label><input type="checkbox" class="sub-range" data-group="10-14" data-parent="5-30"> 10 - 14</label><br>
        </div>
        <div data-parent="31-60">
            <label><input type="checkbox" class="sub-range" data-group="31-35" data-parent="31-60"> 31 - 35</label><br>
            <label><input type="checkbox" class="sub-range" data-group="36-40" data-parent="31-60"> 36 - 40</label><br>
        </div>
    </div>

    <!-- Years -->
    <div class="container" id="years">
        <h2>Years</h2>
        <div data-parent="5-9">
            <label><input type="checkbox" class="year" data-group="5" data-parent="5-9"> 5</label><br>
            <label><input type="checkbox" class="year" data-group="6" data-parent="5-9"> 6</label><br>
            <label><input type="checkbox" class="year" data-group="7" data-parent="5-9"> 7</label><br>
        </div>
    </div>

    <button type="button" onclick="handleSubmit()">Submit</button>
</form>

<h2>Selected Filters</h2>
<div id="selectedFilters"></div>

<script>
    // Handle form submission
    function handleSubmit() {
        const selectedFilters = [];
        const mainRanges = document.querySelectorAll(".main-range:checked");
        const subRanges = document.querySelectorAll(".sub-range:checked");
        const years = document.querySelectorAll(".year:checked");

        // Add selected years
        years.forEach(year => {
            selectedFilters.push(year.dataset.group);
        });

        // Add selected sub ranges if no years are selected within them
        subRanges.forEach(subRange => {
            const parentGroup = subRange.dataset.group;
            const subGroupYears = document.querySelectorAll(`.year[data-parent="${parentGroup}"]:checked`);
            if (subGroupYears.length === 0) {
                selectedFilters.push(parentGroup);
            }
        });

        // Add main ranges if no sub ranges or years are selected within them
        mainRanges.forEach(mainRange => {
            const parentGroup = mainRange.dataset.group;
            const subGroupCheckboxes = document.querySelectorAll(`.sub-range[data-parent="${parentGroup}"]:checked`);
            const yearCheckboxes = document.querySelectorAll(`.year[data-parent^="${parentGroup}"]:checked`);
            if (subGroupCheckboxes.length === 0 && yearCheckboxes.length === 0) {
                selectedFilters.push(parentGroup);
            }
        });

        // Display selected filters
        const selectedDiv = document.getElementById("selectedFilters");
        selectedDiv.innerHTML = selectedFilters.length > 0
            ? selectedFilters.join(", ")
            : "No filters selected.";
    }
</script>
</body> </html>