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, May 21 '13 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 `id`s 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, May 21 '13 at 19:41

score 3 · Accepted Answer · answered May 21 '13 at 19:25

3

Try this :

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

answered May 21 '13 at 19:25

Karl-André Gagnon

33,662
5
50
75

Thanks.. That did exactly what I wanted. – Krishanu Dey May 21 '13 at 19:30
@ChamikaSandamal :: I was trying to.. but it was saying "You can accept the answer after 5 mins.." :( – Krishanu Dey May 21 '13 at 19:39

Sushanth -- · Answer 2 · 2013-05-21T19:38:52.300

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 '13 at 19:38

answered May 21 '13 at 19:24

Sushanth --

55,259
9
66
105

That's incredibly wrong. Ever heard of event bubbling? http://jsfiddle.net/m6Uta/ . I'm not saying it should be done that way, but you shouldn't mislead the OP – Ian May 21 '13 at 19:33
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 – Ian May 21 '13 at 19:34

score 0 · Answer 3 · answered May 21 '13 at 19:24

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 '13 at 19:24

km6zla

4,787
2
29
51

2

`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. – Halcyon May 21 '13 at 19:25
1

@FritsvanCampen And it works just the same. You should test it before you declare something like that. http://jsfiddle.net/ZssTb/1/ – Ian May 21 '13 at 19:27
That must be some jQuery magic then .. I'm stumped. I don't know if I approve of this. – Halcyon May 21 '13 at 19:29
1

@FritsvanCampen Please refer to [this question](http://stackoverflow.com/questions/11205957/jquery-difference-between-change-and-click-event-of-checkbox) and [this W3C document](http://www.w3.org/TR/WCAG20-TECHS/SCR35) – km6zla May 21 '13 at 19:39

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

3 Answers3