select all checkboxes using .map function

Question

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.

Why are you not just looping over the checkboxes that are checked? Why do you need an array? — epascarello, Jan 10 '22 at 16:40
https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/ — , Jan 10 '22 at 16:40
https://stackoverflow.com/questions/18537609/how-to-check-all-checkboxes-using-jquery — epascarello, Jan 10 '22 at 16:44
Duplicate: [How to check all checkboxes using jQuery?](https://stackoverflow.com/questions/18537609/how-to-check-all-checkboxes-using-jquery) — , Jan 10 '22 at 16:51
@epascarello cause i want to call pdf file from the selected rows, so i put the id of the selected row into arrays — Bsoziz Giiig, Jan 10 '22 at 16:53
*any suggestions* - don't have a global array that you keep updated, it will invariably get out of sync. Instead, build the IDs *when you need them* - ie move the `chkArr = $('.single-row-checkbox:checkbox:checked').map(function(){` inside the button click event and remove the dodgy `onchange="toggleTick_Change()"`. — freedomn-m, Jan 10 '22 at 17:30
@freedomn-m why can't i use the onchange ="toggleTick_Change() ? — Bsoziz Giiig, Jan 10 '22 at 17:37
You *can* - you asked for suggestions. You don't need it if you read the values when you need them. — freedomn-m, Jan 10 '22 at 17:46

score 0 · Answer 1 · answered Jan 10 '22 at 19:09

okay, i solved it. i add if else statement correctly. I also don't use toggleTick_Change onevent function and use class instead. I add js-checkbox class in my checkbos html code.

below are the main thing i change in my checkboxes function

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{

            }
            
        
    
    });
});

Thanks for all suggestions.

select all checkboxes using .map function

1 Answers1