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... — James Glass
– 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
– 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
– 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
– mynameisneo, Commented Aug 4, 2013 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 are you using? — James Glass
– James Glass, Commented Aug 4, 2013 at 13:50

frogatto · Accepted Answer · 2013-08-04 13:48:33Z

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 4, 2013 at 13:48

answered Aug 4, 2013 at 13:38

frogatto

29.4k13 gold badges89 silver badges137 bronze badges

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

Comments

user447356 · Accepted Answer · 2013-08-04 13:52:35Z

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.

Stephen · Accepted Answer · 2013-08-04 13:31:25Z

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 4, 2013 at 13:31

Stephen

2,6003 gold badges34 silver badges60 bronze badges

Collectives™ on Stack Overflow

Calling a jQuery function from onclick event

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related