在RadioButton上调用javascript函数单击

Question

我希望客户能够购买电话线或信用卡.首先,两个divs都是隐藏的,我希望当客户选择一个购买选项时,相关内容div取消隐藏(或show).

这是我的代码,但是当我检查两个单选按钮中的一个时没有任何反应.我不希望页面回发,所以我无法设置AutoPostBack="true"

对我做错了什么的帮助真的很感激=)

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#radLinePanel").click(chkPanelChanged);
        $("#radCreditPanel").click(chkPanelChanged);
     chkPanelChanged();
    });

    function chkPanelChanged() {
        if ($("#radLinePanel").is(':checked')) {
            $("#divLine").show("medium");
        }
        else {
            $("#divLine").hide("medium");
        }
        if ($("#radCreditPanel").is(':checked')) {
            $("#divCredit").show("medium");
        }
        else {
            $("#divCredit").hide("medium");
            }
    }
</script>


<div class="GreenPanel">
    <div class="GreenPanelHeader">   
        <asp:RadioButton ID="radLinePanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" ClientIDMode="Static"/>
        Buy New Phone Line
    </div>
    <div id="divLine" class="GreenPanelContent" runat="server">
        Blablabla
    </div>

    <div class="GreenPanelHeader">                                               
        <asp:RadioButton ID="radCreditPanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" AutoPostBack="false"/>
        Buy credit                         
    </div>
    <div id="divCredit" class="GreenPanelContent" runat="server">
        Blablabla
    </div>
</div>

Answer 1

你的语法错了.你可以试试这个:

$(document).ready(function () {
   $("#radLinePanel").click(function(){
      chkPanelChanged();
   });

   $("#radCreditPanel").click(function(){
      chkPanelChanged();
   });
});

要么

$(document).ready(function () {

   $("input[type='radio']").click(function(){
      chkPanelChanged();
   });

});

chkPanelChanged也可以是这样的:

$(document).ready(function () {
    $("input[type='radio']").on("change", function(){        
        chkPanelChanged(this);
    });
});

function chkPanelChanged(obj) {
    if (obj.id == "radLinePanel") {
        $("#divLine").show("medium");
        $("#divCredit").hide("medium");
    }
    else if (obj.id == "radCreditPanel")
    {
        $("#divLine").hide("medium");
        $("#divCredit").show("medium");
    }
}

如果您尝试使用分组单选按钮,请考虑以下情况:

HTML

<div id="radio">
    <input type="radio" id="radio1" name="radio" value="1" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" value="2" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" value="3" /><label for="radio3">Choice 3</label>
</div>

jQuery的

$("input[name='radio']").on("change", function () {
   alert(this.value);
});