34
Views
6
Comments
How to shift-selection for multiple checkboxes and how to count them all?
Application Type
Reactive

Hello,

I'd like to shift-select multiple checkboxes in each row of a table.

I applied jQuery but It doesn't work initially; I can only check the two checkboxes I clicked.

After that shift-selection works, but I need it to work from the beginning.

Also, I'd like to count the shift-selected checkboxes, but that doesn't work either. It only counts the two checkboxes I clicked.

Does anyone know a solution?

I attached my jQuery code.


Thanks.

jQuery.PNG
2021-11-12 04-59-31
Manikandan Sambasivam

Hi,

Please try this script

$(document).ready(function() {

    let firstChecked = null;  

    let checkboxes = $('input[type="checkbox"]'); 

    checkboxes.on('click', function(event) {

        let clickedCheckbox = $(this); 

        if (event.shiftKey && firstChecked !== null) {

            let firstIndex = checkboxes.index(firstChecked);

            let clickedIndex = checkboxes.index(clickedCheckbox);

            let minIndex = Math.min(firstIndex, clickedIndex);

            let maxIndex = Math.max(firstIndex, clickedIndex);

            checkboxes.slice(minIndex, maxIndex + 1).prop('checked', clickedCheckbox.prop('checked'));

        }

          if (!event.shiftKey) {

            firstChecked = clickedCheckbox;

        }

        updateSelectedCount();

    });

  

    function updateSelectedCount() {

        let selectedCount = $('input[type="checkbox"]:checked').length;

        $('#selectedCount').text('Selected checkboxes: ' + selectedCount);

    }

});

UserImage.jpg
Yuika Maeda

Hello Manikandan, 

I've tried your script but it didnt work as I expected.
I guess I didnt discribe my situation well, I've tried your script at OnChange action of checkbox but is this correct?

Kind regards

Yuika Maeda

2021-11-12 04-59-31
Manikandan Sambasivam

Yes, you need to call this event on change. Could you please share the OML file? 

UserImage.jpg
Yuika Maeda


Sorry, I've deleted the reply because the OML file I attached didnt have expression to count checkboxes, I've just added the expression to count above the table!

I appreciate your kindness.

Project.oml
2025-09-25 14-38-22
Lokesh Kumar Yadav

You can use the structure for multiple selections instead of  jQuery, making it easier to handle. I have sent you the OML file; check it out—it will help you. 

MultipleSelection.oml
UserImage.jpg
Yuika Maeda

Hello Lokesh, thank you for your oml file and I appreciate you but I wanted to have multiple concective checkboxes checked at once  when I push shift key. :(

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.