code not working without an alert() in javascript

Question

my problem is the following code is not working without an alert().I am using a two level select/deselct all box. but the code is working for one level only. It is not being able to deselect the 'select all' checkbox on unchecking a single checkbox or vice-versa without the alert..

alert('17');

$('input.DataCheckAll').click(function() {
    if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
        $('input.CheckAll').prop('checked', true);
    } else {
        $('input.CheckAll').prop('checked', false);
    }
});

if ($('input.CheckAll').length > 0) {
    $('input.CheckAll').attr('checked', false);
    $('input.CheckAll').click(function() {
        if (this.checked) {
            $('input.DataCheckAll').each(function() {
                this.checked = true;
            });
        } else {
            $('input.DataCheckAll').each(function() {
                this.checked = false;
            });
        }
    });
}

hmmm...thats strange, can your post corresponding HTML as well? — NoobEditor
– NoobEditor, Commented Sep 18, 2014 at 9:39
did you already try something else instead of an alert? Like console.log('17); I thought I had a similar issue once but looking at the code again I found the problem was in fact not related to the alert(); but to the input's values on page (re-)load. I made a mistake with a selector. — speendo
– speendo, Commented Sep 18, 2014 at 9:45

Joe · Accepted Answer · 2014-09-18 09:40:14Z

4

It's highly likely that you just need to wrap it in $(function() { /* code */ });. At present, your code is being stopped by the alert, which lets the document load in the background so by the time you close the alert, the page is ready for everything you're trying to do.

By just telling it to wait until the page has finished loading, you shouldn't need the alert any more.

$(function() {
    // code
});

is exactly the same as

$(document).ready(function() {
    // code
});

answered Sep 18, 2014 at 9:40

Joe

15.8k4 gold badges52 silver badges84 bronze badges

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

2 Comments

tomi Over a year ago

I tried wrapping it in $(function(){}); but it is not working.same result

Joe Over a year ago

OK, link to your page then - otherwise we're just guessing and guessing and guessing

andrew · Accepted Answer · 2014-09-18 09:40:03Z

The code is probably running before the dom is ready, Try this:

$(function(){     //by passing jQuery a function instead of a selector
                  // it will call the function when the dom is ready
$('input.DataCheckAll').click(function() {
    if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
        $('input.CheckAll').prop('checked', true);
    } else {
        $('input.CheckAll').prop('checked', false);
    }
});

if ($('input.CheckAll').length > 0) {
    $('input.CheckAll').attr('checked', false);
    $('input.CheckAll').click(function() {
        if (this.checked) {
            $('input.DataCheckAll').each(function() {
                this.checked = true;
            });
        } else {
            $('input.DataCheckAll').each(function() {
                this.checked = false;
            });
        }
    });
}
});

Bhushan Kawadkar · Accepted Answer · 2014-09-18 09:44:05Z

You should execute your jquery script after DOM is ready, so wrap it inside $(function(){});

NOTE - Also, you need not to iterate $('input.DataCheckAll') using .each(), to check / uncheck. You can simply use $('input.DataCheckAll').prop('checked',true);

$(function(){
$('input.DataCheckAll').click(function() {
    if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
        $('input.CheckAll').prop('checked', true);
    } else {
        $('input.CheckAll').prop('checked', false);
    }
});

if ($('input.CheckAll').length > 0) {
    $('input.CheckAll').attr('checked', false);
    $('input.CheckAll').click(function() {
        /*if (this.checked) {
            $('input.DataCheckAll').each(function() {
                this.checked = true;
            });
        } else {
            $('input.DataCheckAll').each(function() {
                this.checked = false;
            });
        }*/
      // to select / deselect all data check boxes
      $('input.DataCheckAll').prop('checked',this.checked);
    });
}
});

Collectives™ on Stack Overflow

code not working without an alert() in javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related