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.
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.