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

/

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/uxRGB/1/

• javascript
• jquery

• What's your problem here? The jsFiddle checks/unchecks all the boxes for me... – James Glass Commented Aug 4, 2013 at 13:33
• John, as I said, the Fiddle works fine. This same implementation does not work within our application, so I want to fire the function onclick. It has to do with how jQuery is implemented, it is a legacy app – mynameisneo Commented Aug 4, 2013 at 13:35
• What version of jQuery are you loading in your application? What errors are you getting in your console? – James Glass Commented Aug 4, 2013 at 13:39
• 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. – mynameisneo Commented Aug 4, 2013 at 13:46
• 1 In the future, put that information directly in your question, you'll get better (and more) answers. What version of jQuery UI are you using? – James Glass Commented Aug 4, 2013 at 13:50

3 Answers 3

Use change event instead of click

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

if still not worked, you can use this:

<input type="checkbox" id="chkall" onclick="myfunc()" />

And:

function myfunc () {
        // this is the function I need to call
        var opt = $("#chkall").parent().find('input[type=checkbox]');
        opt.prop('checked', $("#chkall").is(':checked') ? true : false);
    }

Not sure it's causing the problem you're facing but your current code is changing the "check all" checkbox itself when clicking it, which on some browsers might cause unexpected results.

First, change the code to:

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

This will affect all checkboxes except the one being clicked.

Now assuming you want to run the same code when clicking a separate button, just have:

$("#btnFoo").click(function() {
    $('#chkall').click();
});

Updated fiddle.

Have you tried this?

 $('#chkall').trigger('click');

That should execute any handlers and behaviors attached to the checkbox. See: http://api.jquery./trigger/