使用 .map 函数选择所有复选框

Question

所以，我设法创建了一系列勾选的行并将其链接到一个按钮。单击按钮时，所有单击的行都将在新选项卡中打开。

现在我的问题是，我没有设法使所有内容都被选中。我尝试了各种将所选行放入数组的方法，而有效的方法是这段代码，所以我将继续使用它：

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();
}

但是当另一个复选框被选中时，仍然无法全部选中。

以下是打开新标签的按钮：

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]);   
    }
}

复选框 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()" />

按钮 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>

非常感谢任何建议。

Answer 1

好的，我解决了。我正确地添加了 if else 语句。 我也不使用 toggleTick_Change onevent 函数，而是使用类。 我在我的 checkbos html 代码中添加了 js-checkbox 类。

以下是我在复选框功能中更改的主要内容

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

            if ($(this).attr('id') === 'chkAll'){
                if ($(this).prop('checked') === true){
                    $('.single-row-checkbox').prop("checked", true);
                    chktArr = $('.single-row-checkbox:checkbox:checked').map(function(){
                        return $(this).val();               
                    }).get();
                    console.log('the checked values are: ' + chktArr);
                    $('#conditional-part').show();      
                }else {
                    $('.single-row-checkbox').prop("checked", false);
                    chktArr = $('.single-row-checkbox:checkbox:checked').map(function(){
                        return $(this).val();               
                    }).get();
                    console.log('the checked values are: ' + chktArr); 
                }
            }else{

            }
            
        
    
    });
});

感谢所有建议。