Several flags are checked as in Gmail

Question

I am trying to copy the behavior of Gmail using checkboxes by selecting the full range, clicking one by one, and then clicking on it, check the boxes between them.

However, I have a compatibility issue between Firefox and Chrome, since clicking on the checkboxes works very well, but clicking on the shortcuts works differently in a completely different way, since Firefox does not seem to initiate the change when the screen changes.

Here you can check and test my code.

Obviously, there are problems with Firefox and the label, I tried running the change() flag, but it works in the opposite direction from the position, I tried to "reset" the label events using preventDefault() , and then raising the change() event, and the problem seems the same, but now Chrome has this error (which, it seems to me, is somehow correct, the first homologization).

An easy way to detect browsers, but every web developer guru tells us that it’s better to identify the problem, not the browser, so what would be a good solution for this? Also, it does not work in IE because it does not support indexOf() .

Thanks!

Answer 1

For some reason, the tag works differently, highlighting text in Firefox. I think the reason it fails is because when you hold down the shift and click on the label, it does not check the checkbox and thus does not fire the marked event.

Check out: http://jsfiddle.net/xerf/Prxdn/10/

This works both in webkit and in FireFox. I changed the labels to span tags. With a bit of CSS, you can fix the indentation.