Trigger another function on dynamically created select change

Question

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


} );

Shouldn't your if statement be if ($('#check_all').is(':checked'))...? — j08691
– j08691, Commented Feb 10, 2012 at 21:37
Can you set a breakpoint on $('#check_all').click() and see if the code even gets there? It could be the handler isn't even bound. You might need live('changed', function () { instead. — Heretic Monkey
– Heretic Monkey, Commented Feb 10, 2012 at 21:43

ShankarSangoli · Accepted Answer · 2012-02-11 19:55:51Z

1

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

edited Feb 11, 2012 at 19:55

answered Feb 11, 2012 at 19:17

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

Comments

Jørgen · Accepted Answer · 2012-02-10 21:43:41Z

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

Collectives™ on Stack Overflow

Trigger another function on dynamically created select change

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related