asp checkbox not firing jquery function

Question

Ok I have checked several solution and have no luck. What the heck am I doing wrong. I can retrieve the ID from check_controls doing an alert onload but not on change

<asp:CheckBox ID="chkAutoReverse" runat="server" CssClass="" Width="200px" 
     Text="Auto Reverse:" TextAlign="Right" AutoPostBack="false" />

$(document).ready(function() {
    var check_controls = $('input[id*=chkAutoReverse]');
    var AutoReverseOptions = document.getElementById('AutoReverseOptions');

    $(check_controls).change(function() {
        if ($(this).is(':checked')) {
            alert($(check_controls).attr("id"));

        } else {
            alert($(AutoReverseOptions).attr("id"));
        }
    });
});

additional html markup

                            <div style="height: 60px">
                            <div class="singlepanelcontentleft">
                                <asp:CheckBox ID="chkAutoReverse" runat="server" CssClass="" Width="200px" Text="Auto Reverse:"
                                    TextAlign="Right" AutoPostBack="false" /></div>
                            <div id="AutoReverseOptions" class="singlepanelcontentleft" style="display: none;">
                                <asp:RadioButtonList ID="optTabs" runat="server" RepeatDirection="Horizontal" RepeatLayout="Table"
                                    Width="91%" Height="22px">
                                    <asp:ListItem Text="Next Period" Value="1" Selected="true"></asp:ListItem>
                                    <asp:ListItem Text="2 Periods from Now" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="3 Periods from Now" Value="3"></asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                        </div>

this is nested in other divs and a fieldset. Pasting the other code did not render well

I created a demo page with your code, it works fine for me. What does the rest of your markup look like? — rick schott, Aug 26 '11 at 01:36

score 1 · Answer 1 · answered Aug 26 '11 at 01:14

1

you should reference asp.net IDs using the following:

<%= chkAutoReverse.ClientID %>

answered Aug 26 '11 at 01:14

c0deNinja

3,956
1
29
45

score 0 · Answer 2 · answered Aug 26 '11 at 01:56

0

Either reference the ClientID or set the ClientIDMode: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx

answered Aug 26 '11 at 01:56

jdc0589

6,972
5
36
39

Dennis · Answer 3 · 2011-08-26T02:39:03.487

0

Listening to checkboxes works better with a click event than a change event.

Attribute selectors need to be enclosed in quotes:

var check_controls = $('input[id*="chkAutoReverse"]');

edited Aug 26 '11 at 02:39

answered Aug 26 '11 at 01:58

Dennis

32,200
11
64
79

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

OK I found the answer. You can get the details here. It boiled down the the controls being in an update panel and not resubscribing to the jQuery events when the panel loaded.

edited May 23 '17 at 12:19

Community

1
1

answered Aug 26 '11 at 21:10

Tim

1,249
5
28
54

asp checkbox not firing jquery function

4 Answers4