CODEWITHSUNDEEP
javascriptjqueryselecttriggersonchange
Tural Ali
Tural Ali

Reputation: 23250

Trigger another function on dynamically created select change

Using datatables. It generated following selectbox dynamically with Javascript

enter link description here http://content.screencast.com/users/TT13/folders/Jing/media/47ac4d39-5e96-415b-a51e-6d784ef18a3b/2012-02-11_0123.png

Firebug shows this piece of code for select box above

enter image description here

I tried to trigger $('#check_all').click( function() with following simple function. But it doesn't work. What Is there any mistake in code?

 $('select[name=list_length]').change(function(){
    if($('#check_all').prop('checked')) 
        $('#check_all').click();    
});

$('#check_all').click( function() {
    if($(this).prop('checked')){
        totalqt=0;
        $('.checkbox').each(function(){
            $(this).prop('checked', true);    
            doIt(this);             
        });
    }else{            
        $('.checkbox').each(function(){
            $(this).prop('checked', false);    
            doIt(this);             
        });
    }
    changeQt();     


} );

Upvotes: 0

Views: 429

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69905

Change your code like this.

function checkAllCheckboxes(isChecked) {
    if(isChecked ){
        totalqt=0;
    }
    $('.checkbox').each(function(){
        $(this).prop('checked', isChecked);    
        doIt(this);             
    });
    changeQt();     
}

$('select[name=list_length]').change(function(){
    if($('#check_all').is(':checked')){
        $('#check_all').prop('checked', false);
        checkAllCheckboxes(false);    
    }
});

$('#check_all').click(function(){
    checkAllCheckboxes(this.checked);
});

Upvotes: 1

Jørgen
Jørgen

Reputation: 9130

I can see one thing that can be a problem in your code, but as you don't write about what exactly is failing, I'm not sure if this is the problem.

 $('select[name=list_length]').change(function(){
    if($('#check_all').prop('checked')) 
        $('#check_all').click();    
});

Here, you see if the checkbox is checked, and then you invoke a click event on it.

In the click event handler, you check again if the box is checked and iterate over the other checkboxes. However, the click event you invoke in the change event handler will change the checked state of the checkbox, and thus you get the oposite result of what's intended.

How do you like this solution?

var toggleCheckBoxes = function() {
    if($(this).prop('checked')){
        totalqt=0;
        $('.checkbox').each(function(){
            $(this).prop('checked', true);    
            doIt(this);             
        });
    }else{            
        $('.checkbox').each(function(){
            $(this).prop('checked', false);    
            doIt(this);             
        });
    }
    changeQt();     
}

$('#check_all').click(toggleCheckBoxes);
$('select[name=list_length').change(function(){
  if($('#check_all').is(':checked')){ toggleCheckBoxes(); }
});

Upvotes: 0

Related Questions