RadioButton onclick event not firing

Question

I have a group of RadioButton which should have an onclick event. This onclick event ( SecurityCheckedChanged ) will show/hide other dividers (filled with RadioButton) based on what RadioButton was clicked.

However, SecurityCheckedChanged doesn't seem to work. I'm not sure if there is something I'm misunderstanding about onclick events when it comes to RadioButton . Or if this .is(':checked') is incorrect?

JavaScript:

//this seems to fire off fine
function pageLoad(sender, args) {
    $('#divRadioGroupKeyFormatWEP').hide();
    $('#divRadioGroupKeyFormatWPA').hide();
}

//however this doesn't seem to work.
function SecurityCheckedChanged() {
    if ($("#<%= radWEP.ClientID %>").is(':checked')) {
        $('#divRadioGroupKeyFormatWEP').show();
        $('#divRadioGroupKeyFormatWPA').hide();
    }
    else if ($("#<%= radWPA.ClientID %>").is(':checked') || $("#<%= radWPA2.ClientID %>").is(':checked')) {
        $('#divRadioGroupKeyFormatWEP').hide();
        $('#divRadioGroupKeyFormatWPA').show();
    }
    else {
        $('#divRadioGroupKeyFormatWEP').hide();
        $('#divRadioGroupKeyFormatWPA').hide();
    }
}

HTML:

<div style="text-align: left;">
    <asp:RadioButton id="radNone" Text="None" Checked="True" meta:resourcekey="radNoneRc1"
        GroupName="RadioGroupSecurity" runat="server" onclick="SecurityCheckedChanged"/>

    <asp:RadioButton id="radWEP" Text="WEP" Checked="False" meta:resourcekey="radWepRc1"
        GroupName="RadioGroupSecurity" runat="server" onclick="SecurityCheckedChanged"/>

    <asp:RadioButton id="radWPA" Text="WPA" Checked="False" meta:resourcekey="radWpaRc1"
        GroupName="RadioGroupSecurity" runat="server" onclick="SecurityCheckedChanged"/>

    <asp:RadioButton id="radWPA2" Text="WPA2" Checked="False" meta:resourcekey="radWpa2Rc1"
        GroupName="RadioGroupSecurity" runat="server" onclick="SecurityCheckedChanged"/>
</div>


<!-- show/hide these based on above -->
<div id="divRadioGroupKeyFormatWEP" style="text-align: left;">
    <asp:RadioButton id="radOpen" Text="Open" Checked="True" meta:resourcekey="radOpenRc1"
        GroupName="RadioGroupKeyFormat1" runat="server"/>
    <asp:RadioButton id="radShared" Text="Shared" Checked="False" meta:resourcekey="radSharedRc1"
        GroupName="RadioGroupKeyFormat1" runat="server"/>
</div>

<div id="divRadioGroupKeyFormatWPA" style="text-align: left;">
    <asp:RadioButton id="radTKIP" Text="TKIP" Checked="True" meta:resourcekey="radTkipRc1"
        GroupName="RadioGroupKeyFormat2" runat="server"/>
    <asp:RadioButton id="radAES" Text="AES" Checked="False" meta:resourcekey="radAesRc1"
        GroupName="RadioGroupKeyFormat2" runat="server"/>
</div>

Answer 1

It seems you're missing the parentheses. It seems to me that it should be: onclick="SecurityCheckedChanged()" or onclick="javascript:SecurityCheckedChanged()"

The first answer to this post is interesting on how to hook events in javascript.

Answer 2

I like to use RadioButtonList which is easy to find the selected value using jQuery selector -

#id input:radio:checked

<div style="text-align: left;">
    <asp:RadioButtonList runat="server" ID="SecurityRadioButtonList" 
        RepeatDirection="Horizontal">
        <asp:ListItem Text="None" Value="" Selected="True" />
        <asp:ListItem Text="WEP" Value="WEP" />
        <asp:ListItem Text="WPA" Value="WPA" />
        <asp:ListItem Text="WPA2" Value="WPA2" />
    </asp:RadioButtonList>
</div>
<!-- show/hide these based on above -->
<div id="divRadioGroupKeyFormatWEP" style="text-align: left;">
    <asp:RadioButton ID="radOpen" Text="Open" Checked="True"
        GroupName="RadioGroupKeyFormat1" runat="server" />
    <asp:RadioButton ID="radShared" Text="Shared" Checked="False"
        GroupName="RadioGroupKeyFormat1" runat="server" />
</div>

<div id="divRadioGroupKeyFormatWPA" style="text-align: left;">
    <asp:RadioButton ID="radTKIP" Text="TKIP" Checked="True"
        GroupName="RadioGroupKeyFormat2" runat="server" />
    <asp:RadioButton ID="radAES" Text="AES" Checked="False"
        GroupName="RadioGroupKeyFormat2" runat="server" />
</div>

Script

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">    
    var wepDiv, wpaDiv;    
    $(function() {
        wepDiv = $('#divRadioGroupKeyFormatWEP');
        wpaDiv = $('#divRadioGroupKeyFormatWPA');
        wepDiv.hide();
        wpaDiv.hide();    
        $('#<%= SecurityRadioButtonList.ClientID %> input').click(function() {
            securityChange();
        });    
        securityChange();
    });

    function securityChange() {
        var value = $('#<%= SecurityRadioButtonList.ClientID %> input:radio:checked').val();
        if (value != undefined) {
            if (value == "WEP") {
                wepDiv.show();
                wpaDiv.hide();
            } else if (value == "WPA" || value == "WPA2") {
                wepDiv.hide();
                wpaDiv.show();
            } else {
                wepDiv.hide();
                wpaDiv.hide();
            }
        }
    }
</script>

jsfiddle

Here is the generated code in jsfiddle.net/9vg3bs77 .