javascript not seeing first click?

Question

I have a table that the user can select certain rows by checkboxes. I have some javascript that let's them select each checkbox and Select All. I also have some javascript written to let the user check a box then shift-click another checkbox and all the boxes between should become checked.

All this is working the only problem is that the first checkbox isn't being recognized. Thus when the user holds shift and selects another checkbox, only that checkbox is checked. But if the user holds shift and selects a third checkbox, THEN all the boxes between the 2nd and 3rd become checked.

Javascript

$(document).ready(function () {
    $(this).click(function () {
        //shift-click checkboxes 
        var lastChecked = null;
        var handleChecked = function (e) {
            //alert(lastChecked);
            if (lastChecked && e.shiftKey) {
                var i = $('input[type="checkbox"]').index(lastChecked);
                var j = $('input[type="checkbox"]').index(e.target);

                var checkboxes = [];
                if (j > i) {
                    checkboxes = $('input[type="checkbox"]:gt(' + (i - 1) + '):lt(' + (j - i) + ')');
                } else {
                    checkboxes = $('input[type="checkbox"]:gt(' + j + '):lt(' + (i - j) + ')');
                }

                if (!$(e.target).is(':checked')) {
                    $(checkboxes).removeAttr('checked');
                } else {
                    $(checkboxes).attr('checked', 'checked');
                }
            }
            lastChecked = e.target;
        } //handleChecked
        $('input[type=checkbox]').click(handleChecked);
    }); //$(this).click(function())

    //select all checkboxes
    $('#selectall').click(function (i, v) {
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function (i, v) {
        $('#selectall').prop('checked', $('.selectedId:checked').length == checkCount)
    });
}); //ready function

I made a fiddle that replicates the problem.

http://jsfiddle.net/tihg7947/JXnNK/

To replicate my issue, check a box (other than Select All) and then hold shift and select another box.

I'm new to web design and have no idea how to diagnose this issue (event handling?). I would appreciate any help or guidance.

Satpal · Accepted Answer · 2013-10-22 15:06:45Z

3

You are binding $('input[type=checkbox]') inside $(this).click(function () { function thus its not working first time

You bind event inside $(document).ready(function () {

As my understanding remove $(this).click(function () {

Fiddle Demo

answered Oct 22, 2013 at 15:06

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bratak Over a year ago

Thank you! I wish I could select multiple answers as accepted because you and @RussellZahniser had the same answer.

Satpal Over a year ago

@bratak, no issue with not accepting it as answer. I am glad that I am able to help in someway.

Russell Zahniser · Accepted Answer · 2013-10-22 15:05:06Z

2

You install the handleChecked listener from within $(this).click(function () {. This means that:

The event handler is not installed until the user clicks once.
Multiple copies of the event handler will be installed.

I think you want to just set the event handler once inside $(document).ready(function () {.

So, just delete the lines

$(this).click(function () {

and

}); //$(this).click(function())

answered Oct 22, 2013 at 15:05

Russell Zahniser

16.4k41 silver badges31 bronze badges

1 Comment

bratak Over a year ago

Thank you very much! This was the problem and removing it corrected the issue. I appreciate the fundamental breakdown as to why it wasn't working too!

Collectives™ on Stack Overflow

javascript not seeing first click?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related