Question

We are calling a jQuery function using onclick on a checkbox. We want that checkbox to toggle all checkboxes below it. Here is the HTML for the toggle checkbox:

    <input type="checkbox" id="toggle" name="toggle" class="daxle_cb" value="" onclick="daxleToggleCB('adminForm');" />

And here is the function:

    function daxleToggleCB( formName )
    {
        jQuery('#' + formName).find('input[type=checkbox]').prop('checked', this.checked);
    };

However, this is not working. What does work is this:

    function daxleToggleCB( formName) {
        jQuery( ':checkbox[name=toggle]' ).click
        (
            function ()
            {
                jQuery( '#'+formName ).find( 'input[type=checkbox]' ).prop( 'checked', this.checked );
            }
        ); 
    };     

Although, this function only works on the third click of the checkbox. So the problem is getting the checkboxes to toggle on the first click.

Answer 1

first, your not binding your jQuery.click() event until it’s been clicked once at least.

then it looks like you have two events firing.

you have the inline onclick event, as well as the jQuery.click event.