Calling a jQuery function from onclick event

Question

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/

What's your problem here? The jsFiddle checks/unchecks all the boxes for me... — Luke Shaheen, Aug 04 '13 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, Aug 04 '13 at 13:35
What [version of jQuery](http://jquery-howto.blogspot.com/2009/02/how-to-check-jquery-version.html) are you loading in your application? What errors are you getting in [your console](http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it)? — Luke Shaheen, Aug 04 '13 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, Aug 04 '13 at 13:46
In the future, put that information directly in your question, you'll get better (and more) answers. What [version of jQuery UI](http://stackoverflow.com/questions/3657953/how-do-i-get-the-jquery-ui-version) are you using? — Luke Shaheen, Aug 04 '13 at 13:50
Thanks for the suggestions :). I accepted your edits as well. jQuery UI version is 1.8.21 — mynameisneo, Aug 04 '13 at 13:53

frogatto · Accepted Answer · 2013-08-04T13:48:33.173

5

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

edited Aug 04 '13 at 13:48

answered Aug 04 '13 at 13:38

frogatto

28,539
11
83
129

score 1 · Answer 2 · answered Aug 04 '13 at 13:52

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.

score 0 · Answer 3 · answered Aug 04 '13 at 13:31

0

Have you tried this?

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

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

answered Aug 04 '13 at 13:31

Stephen

2,410
3
33
57

Calling a jQuery function from onclick event

3 Answers3