Question

我有一组RadioButton，应该有onclick个事件。此onclick事件（SecurityCheckedChanged）将根据点击的with显示/隐藏其他分隔符（已填充RadioButton RadioButton）。

然而，SecurityCheckedChanged似乎无法奏效。在onclick时，我不确定是否存在我对RadioButton事件的误解。或者，如果.is(':checked')不正确？

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

似乎你错过了括号。在我看来它应该是：onclick =＆＃34; SecurityCheckedChanged（）＆＃34;或onclick =＆＃34; javascript：SecurityCheckedChanged（）＆＃34;

this post的第一个答案很有趣，关于如何在javascript中挂钩事件。

Answer 2

我喜欢使用RadioButtonList，它很容易使用jQuery选择器找到所选的值 -

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

以下是jsfiddle.net/9vg3bs77中生成的代码。

单选按钮onclick事件未触发

2 个答案:

脚本

的jsfiddle