rmariuzzo / checkboxes.js

☑️ A jQuery plugin that gives you nice powers over your checkboxes.

Home Page:http://rmariuzzo.github.io/checkboxes.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Trigger 'change' event for all checkboxes in range mode.

sgrifenhagen opened this issue · comments

I moved this from inside another issue, as I misread what the original problem was.

here's my scenario.

table contains multiple columns, with a checkbox in the first. checkbox has an onchange event handler associated with each cb.

table is contained in a div with the data-toggle="checkboxes" data-range="true".

using bootstrap, jquery, jquery ui, tablesorter, and checkboxes.

i click on the first box. press the shift key and click on the bottom of the range.

the event handler for the first box fires. the handler for the bottom box of the range fires. all the intermediate boxes are changed, but the handler for them do not fire.

it is repeatable. in firefox, chrome, and IE.

I have tested it without the tablesorter and got rid of as much extra as i can. didn't make any difference

any suggestions?

make the following change from

      $checkboxes.slice(start, end)
        .filter(':not(:disabled)')
        .prop('checked', $checkbox.prop('checked'));

to this:

      $checkboxes.slice(start + 1, end - 1)
        .filter(':not(:disabled)')
        .prop('checked', $checkbox.prop('checked'))
        .trigger('change');              //

The first line changes (+1 and -1 to the range) became necessary because the change event occurred prior to the execution of the checkbox.range function, so the rows that were actually clicked on had the event fired. the rows in between did not. forcing the event to fire appears to have fixed that.

and one final note for now.

I'd like to thank you for this. it has made my life much easier, as I'm a) not the swiftest javascript coder and b) just now learning jquery (brute force method). Your plugin is a life saver.

thanks...