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>

It's always helpful, this being a client-side issue, to post **MARKUP AS SEEN BY THE BROWSER**. — PeterKA, Aug 22 '14 at 14:16
$("#<%= radWEP.ClientID %>") Intermixing .NET variables in JS is a bad practice. It ensures the JS file can never be cached. Also, you're better off selecting class names, that can be controlled, over the insanity that is .NET's use of element IDs. — Diodeus - James MacFarlane, Aug 22 '14 at 14:17

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

0

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.

edited May 23 '17 at 12:27

Community

1
1

answered Aug 22 '14 at 14:20

Wouter

98
5

Win · Answer 2 · 2014-08-22T15:05:26.780

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

#id input:radio:checked

enter image description here

<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.

RadioButton onclick event not firing

2 Answers2

Script

jsfiddle