select all checkboxes using .map function

So, I managed to create array of ticked rows and linked it to a button. When the button is clicked, all the clicked rows will open in new tabs.

Now my problem is, I didn't manage to make everything selected .I have tried various ways of putting the selected rows into array and the one that works is this code, so i am going to stick using it:

toggleTick_Change()

var chktArr =[];
function toggleTick_Change(){
    chktArr = $('.single-row-checkbox:checkbox:checked').map(function(){
                return $(this).val();               
            }).get();
            console.log('the checked values are: ' + chktArr);
            $('#conditional-part').show();
}

But still didnt manage to make all selected when another checkbox is selected.

Below are the button that open to new tabs:

function btnPrintCNT_Click(){

    console.log('This is from button , the checked values are: ' +  chktArr);
    for(let i = 0 ; chktArr.length > i ; i++){
     window.open('?mod=admin&action=consignment&id=' + chktArr[i]);   
    }
}

Code for the checkbox HTML

<input type="checkbox" id="chkAll" value="{$rows.id}" name="chktArr" style="width: 15px; height: 15px;" class="all-row-checkbox" onchange="toggleTick_Change()" />

<input type="checkbox" id="chkT{$rows.id}" value="{$rows.id}" name="chktArr" style="width: 15px; height: 15px;" class="single-row-checkbox" onchange="toggleTick_Change()" />

Code for button HTML:

<div class="input-group "  role="group" aria-label="..." style="width: 85px; margin-top: 2px; " >
    <span class="input-group-btn">
    <button id="btnPrintCNT" type="button" class="btn btn-sm btn-primary" 
    style="margin: 2px; width: 100px; margin-left: 20px; float: left;"
    onclick="javascript:btnPrintCNT_Click()">CNT</button>
                                            
    </span>
</div>

Any suggestion is highly appreciated.