Showing all data with filter from checkbox value in dataTable

i have a table with dataTable, in this table i have a filter with label All, Software Enginer

when i klik the label Software Enginer the value is the result is appropriate with label, but when i klik all label the value in dataTable is missing/zero data

the code of my table like this:

<div class="position-relative content">
            <div class="position-absolute w-100 row" style="z-index: 50;">
                <div class="col-6">
                    <div class="filter-wrapper">
                        <input type="radio" class="filter-checkbox" name="filter" value="all" checked="checked" />
                        All
                        <input type="radio" class="filter-checkbox" name="filter" value="Software Engineer" />
                        Software Engineer
                        <input type="radio" class="filter-checkbox" name="filter" value="Accountant" />
                        Accountant
                    </div>
                </div>
            </div>
        </div>
        <table id="example" class="table" style="z-index: 30;">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Status</th>
                    <th>Hidden</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>
                        <div class="badge status-badge badge-info">
                            Draft
                        </div>
                    </td>
                    <td>DRF</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                    <td>
                        <div class="badge status-badge badge-info">
                            Draft
                        </div>
                    </td>
                    <td>DRF</td>
                </tr>
            </tbody>
        </table>
    </div>

an then this is my javascript code for dataTable and filter for position field:

$(document).ready(function() {
            dataTable = $("#example").DataTable({
                columnDefs: [{
                    targets: [7],
                    visible: false
                }],
                "bInfo": false,
                "bPaginate": true,
                "bLengthChange": false,
                "buttons": [],
                "ordering": false,
                language: {
                    paginate: {
                        next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
                        previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></i>'
                    }
                },
            });

            $(".filter-checkbox").on("change", function(e) {
                var searchTerms = [];
                $.each($(".filter-checkbox"), function(i, elem) {
                    if ($(elem).prop("checked")) {
                        searchTerms.push("^" + $(this).val() + "$");
                    }
                });
                dataTable.column(1).search(searchTerms.join("|"), true, false, true).draw();
            });
        });

this is my jsdfile:
https://jsfiddle.net/4y9u8xnq/

this is my picture for the result code:

someone can help. how to show all data when i click the radio button with value all?