Due to some bizarre requirements and the way jQuery is implemented in our application, I have to call a jQuery function through a checkbox onclick event.

Below is a perfectly good implementation of the function being triggered via div ID. However, this same code will not work in my application.

In my application, I am using jQuery version 1.7.1. I am not getting any errors, the function simply does not trigger. I'm using Chrome to debug. When I try to invoke it in onclick it responds, but throws back undefined.

HTML

<div id=dialog-confirm title=Select Options>

    <!--I need to call function in onclick event for checkbox below-->

    <input type=checkbox id=chkall /> Check/Uncheck

    <br /><br />



    <input type=checkbox />Option 1<br />

    <input type=checkbox />Option 2<br />

    <input type=checkbox />Option 3<br />

    <input type=checkbox />Option 4<br />

    <input type=checkbox />Option 5<br />

    <input type=checkbox />Option 6<br />

    <input type=checkbox />Option 7

</div>

JS

$(function() {

    $( #dialog-confirm ).dialog({

         resizable: false,

         height:350,

         modal: true,

         buttons: {

            Go: function() {

                $( this ).dialog( close );

            },

            Cancel: function() {

                $( this ).dialog( close );

            }

        }

    });

});



$(document).ready(function(){ 

    $('#chkall').click(function() {

        // this is the function I need to call

        var opt = $(this).parent().find('input[type=checkbox]');

        opt.prop('checked', $(this).is(':checked') ? true : false);

    });     

});

Finally, Fiddle link

http://jsfiddle.net/uxRGB/1/