CODEWITHSUNDEEP
javascriptjquery
tomi
tomi

Reputation: 21

code not working without an alert() in javascript

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;
            });
        }
    });
}

Upvotes: 0

Views: 126

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

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);
    });
}
});

Upvotes: 0

Joe
Joe

Reputation: 15812

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
});

Upvotes: 4

andrew
andrew

Reputation: 9593

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;
            });
        }
    });
}
});

Upvotes: 0

Related Questions