Run JavaScript function on check change of checkbox inside a div with specific class

Question

I've a check box inside a repeater control. the repeater may have variable number of items. I need to call a js function whenever a checkbox with id "DFO_MFO" of any list item is checked/unchecked. how can I do that? I've tried the following code but it is not working.

$(".DFO_MFO").change(function () {
    DfoMfoChecked($(this));
})

ASP.Net Markup

<asp:CheckBox runat="server" id="DFO_MFO" class="DFO_MFO"></asp:CheckBox>

HTML Rendering

<span class="DFO_MFO">
    <input id="ctl00_PageContent_BULK_WOTableControlRepeater_ctl00_DFO_MFO" type="checkbox" name="ctl00$PageContent$BULK_WOTableControlRepeater$ctl00$DFO_MFO">
</span>

if the DFO_MFO is the id of a control. 1). you cannot have multiple elements with same id 2). You have to use # for id selector and . for class selector — Chamika Sandamal
– Chamika Sandamal, Commented May 21, 2013 at 19:36
@ChamikaSandamal You need to read the question. The checkbox is an ASP.NET control, which is in a repeater. That means the ids generated are unique, like the HTML Rendering part shows. Also, why are you een bringing up the difference between # and . in selectors? The OP is targeting the class correctly — Ian
– Ian, Commented May 21, 2013 at 19:41

Karl-André Gagnon · Accepted Answer · 2013-05-21 19:25:15Z

3

Try this :

$(".DFO_MFO").children('input').change(function () {
    DfoMfoChecked($(this));
})

answered May 21, 2013 at 19:25

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

2 Comments

Krishanu Dey Over a year ago

Thanks.. That did exactly what I wanted.

Krishanu Dey Over a year ago

@ChamikaSandamal :: I was trying to.. but it was saying "You can accept the answer after 5 mins.." :(

Sushanth -- · Accepted Answer · 2013-05-21 19:38:52Z

2

You are trying to assign a change event to a span element. But a span element does not have a change event associated to it.

In this case the change event will work because of event bubbling.

Use the context selector or .find to target the inputs and then assign the change event to the checkbox.

$("input", ".DFO_MFO").change(function () {
      DfoMfoChecked($(this));
})

Also it is better to attach events using .on() if you are using jQuery 1.7 and above

 $("input", ".DFO_MFO").on('change', function () {
          DfoMfoChecked($(this));
    })

edited May 21, 2013 at 19:38

answered May 21, 2013 at 19:24

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

2 Comments

Ian Over a year ago

That's incredibly wrong. Ever heard of event bubbling? jsfiddle.net/m6Uta . I'm not saying it should be done that way, but you shouldn't mislead the OP

Ian Over a year ago

It's also not "better" to attach events with .on(). Using .change() is just a shortcut, does the same thing, and it works in older versions of jQuery, while .on() doesn't

km6zla · Accepted Answer · 2013-05-21 19:24:03Z

0

Use .click() and inside the event handler function check if the element .is(':checked') and switch on that. Or in your case just call DfoMfoChecked($(this));

answered May 21, 2013 at 19:24

km6zla

4,9272 gold badges32 silver badges53 bronze badges

4 Comments

Halcyon Over a year ago

click alone isn't enough. You can toggle a checkbox by navigating to it with [tab] and pressing [space]. Also, if you have a label attached to it, you can toggle it by clicking the label, this also doesn't generate a click on the checkbox element.

Ian Over a year ago

@FritsvanCampen And it works just the same. You should test it before you declare something like that. jsfiddle.net/ZssTb/1

Halcyon Over a year ago

That must be some jQuery magic then .. I'm stumped. I don't know if I approve of this.

km6zla Over a year ago

@FritsvanCampen Please refer to this question and this W3C document

Collectives™ on Stack Overflow

Run JavaScript function on check change of checkbox inside a div with specific class

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related